Html5-boilerplate: ::選択背景色のデフォルト

作成日 2011年07月19日  ·  44コメント  ·  ソース: h5bp/html5-boilerplate

問題::selectionスタイルはからのつぶやきで、再びこの時間を育ててきたポール・ロイドスチューロブソン(その最後のつぶやきが古いについて実際にある場合を除きtap-highlight-colorスタイル)。

私が知る限り、彼らの懸念はデフォルトのbackgroundピンクが貧弱なデフォルトの色であることにあるようです。 うまくいけば、彼らはさらなる説明や提案を提供することができます。

色のコントラストに関しては、前回チェックしたとき、「ホットピンク」はブラウザで使用されるデフォルトの青(3.0:1)よりも良くも悪くもありません。 テキストが強調表示されているときにtext-shadow削除することは良い改善だと思うので、背景をデフォルトの青( #3297FDを使用するように切り替えるか、含めるか、または何かを言うためのルールと一緒にコメント。

css

全てのコメント44件

私はウェブサイトでテキストを選択し、それがホットピンクであるのを見て、彼らが定型文を使用していることを知っているのが大好きです。

私はそれがホットピンクのままであると投票します。 人々がそれを変更することをもっと奨励するものがあるとすれば、それがデフォルトの青である場合、誰もがそれに気付かず、そのままにしておくと、再び退屈なサイトになります。

この号をニコラスに提出していただきありがとうございます。

ホットピンクは非常に明白であり、多くのWebサイトのデザインに適合しないことが多いため、テキスト選択には適していないと思います。この値が変更されていないサイトでのテキスト選択は非常に不快なものになる可能性があります。 よりニュートラルな色の使用をお勧めします。 通常、青または灰色が適切な選択ですが、淡い黄色でも機能する場合があります。

これは、ボイラープレートの内容を研究せず、カスタマイズせずに卸売りで使用するという根本的な問題に関連していると思います。 人々の怠惰を減らすように促すことができる量には限界があるかもしれませんが(おそらくこれは定型文の精神に反します)、ファイルのカスタマイズと適応に関するコミュニケーションを増やしてほしいと思います。 多分それは別の問題で提出する必要があります;-)

最後に、ベンと同じ理由でホットピンクを使用している人が何人かいると聞きました。 私はあなたがあなたのウェブサイトを誰のために開発しているのか尋ねることによってこの議論に対抗しますか? それは他の開発者のためですか、それともあなたのウェブサイトのユーザーのためですか? ほとんどの人にとって、テキストの選択で明るいピンク色を見ると、彼らを楽しませるのではなく混乱させるでしょう。

そもそも::selection背景色を上書きする必要がある理由を誰かが説明できますか?

@abitgone既存のブラウザがない場合、ハイライトのtext-shadowを単純に削除することはできないため、デフォルトのハイライトの背景色も削除されます。

私はここでポールと一緒ですが、ホットピンクのテキストの選択がデザインに適合し、衝撃的ではないように見えるWebサイトをまだ見ていません。 ユーザーが期待するブラウザ/ OSのデフォルトから変更された特別な理由はありますか?

では、 ::selection { text-shadow: none }は機能しませんか? その場合でも、デフォルトの選択背景色を変更するのに十分な理由ではないのは確かですか?

デフォルトの色はブラウザ/プラットフォームによって異なりますか? その場合、背景色を提供する場合がありますが、そのデフォルトはニュートラルであり、選択と見なされます。

なぜこれが問題なのかさえわかりません。

すべてのWeb開発者の手を握って、すべてのデフォルトのスタイルを変更するように指示することはできません。 ピンクは、そうそう、おそらくそれを変更する必要があることを思い出させるのに良い色だと思います。

それでも、人々はそれを変えていないので、思い出させるためにそれは失敗します。 このスタイルの効果はすぐには明らかにならないことを心に留めておいてください。 確かに、賢明なデフォルトを設定する方がはるかに優れていますか?

そのままにしておくと+1。 ピンクの色が気に障る場合は変更し、気に入らない場合はそのままにしておきます。

名探偵コナン

ホットピンクから離れることを目的としている場合は、教育+デフォルトのブルーがおそらく最善の策です。 すべてのサイトで「機能」する魔法の色の選択はありません。 一部のサイトでは、よりニュートラルな色はホットピンクほど悪くはないかもしれませんが、ビジネスカラーに近づくほど、:: selectionで消えるテキストが作成される可能性が高くなります。

(追加するのを忘れた:)
個人的に私はそれを残して、サイトを構築するときに彼らが考慮する必要があるデザイン要素としてそれについて人々を教育するための何らかの方法を考え出すためです。 人々にサイトごとにそれを設計させることは、彼らにそれほど悪くないデフォルトを与えるよりも良いです。

スタイルシートは読み取り専用ではありません。 気分を害する場合は変更してください。 個人的にはピンクが好きです。

そのままにしておくと+1。 ボイラープレート全体が削除キーに対応しています。 ピンクのテキストの選択が気に入らない場合は、別の色を選択するか、ルールを完全に削除してください。

確かに、これはあなたが「好きなもの」についてではありません。 それは、ボイラープレートで使用されている賢明なデフォルトについてです。

ピンクのハイライトが表示されるのは好きではありません。90%の確率で、ピンクのハイライトが残っているか、開発者がピンクのハイライトを変更する方法を知らないのは間違いです。 ボイラープレートコードは、視覚的なデザインを損なうことのない、より適切でニュートラルなデフォルトを使用することにより、この影響を減らすのに役立ちます。

真剣に? ピンクから変更する方法がわからない場合は、cssについて詳しく知る前に、使用すべきではないでしょうか。

ピンクは邪悪な暑さです。

ええ、それはあなたが始めるための定型文です。 タオルを投げ入れて、テンプレート全体を含めてみませんか。

ホットピンクは、サイトを適切にテストしていない開発者を強調するキャラクターと「イースターエッグ」を追加すると思います。

前に述べたように、既存のブラウザでは、 ::selection text-shadowだけをリセットすることはできません(これはおそらく修正する必要があります)。 ハイライトされたテキストに特定の色やサイズのテキストシャドウも含まれていると、混乱して見える可能性があります。 したがって、強調表示されたときのテキストの影の問題を回避したい場合は、 ::selection背景と色を宣言する必要があります。

これが問題だと思う人が、テストケースの提示と代替案の提案(コードとして)に移行できれば、それは素晴らしいことです。 現時点では、ピンクは「ニュートラル」とは見なされていないため、ホットピンクを使用する代わりにデフォルトのブルーを再宣言する以外に、具体的に評価するものはありません。

個人的には、青が不快なデフォルトだと思います。 永遠にピンク。

Hot Pink++

ピンクのままにしておきます。選択色を更新しないことを選択したからといって、h5bpを変更しないでください。

ホットピンクFTW。

おそらく誰かがボイラープレートをフォークする必要がありますが、唯一の変更はデフォルトの選択色です?

これらの人は、選択色を変更する必要があることに同意していないようです。

さて...それは解決しました

私は間違いなく青が好きです...ホットピンクの場合は-1。 スクロールするテキスト、黄色の背景にピンクのテキスト、点滅するアニメーションGIFを使用してサイトを構築しない限り、これは決してうまくいきません。

あなたがライムブラックを好まないと私たちに信じてもらいたいのですか?

前回チェックした時、ライムブラックは色ではありません。 もしそうなら、それは天国と素晴らしさの間の十字架になるでしょう。 :D

色とりどりの過去から個人的なタッチを残そうとしているような気がするのかわかりません。 事故以外に、なぜ誰かがピンクを欲しがるのか?

::-moz-selection { background: #000; color: #0F0; text-shadow: none; }
::selection { background: #000; color: #0F0; text-shadow: none; }

これがうまくいったらいいのに...

::selection { background: linear-gradient(left, #0f0 0%,#000 100%); color: #fff; text-shadow: none; }

それならライムブラックになります

パウロと一緒に問題を提起した他の人であること。 ようやくコメントを残すことができました。

私の問題は色の選択ではありません。 私の問題は、ボイラープレートを使用し、サイトの他の部分に合うように色を編集しない人々の怠惰です。 確かにあなたはそれをあなたのサイトの他の部分と結びつけたいでしょう?

私の要求は単純です。 CSSのこの行の上/下にコメントを追加して、サイトの「デザイン」に合わせて変更する必要がある/変更できることを人々に知らせます。 「アウトラインを再定義することを忘れないでください」のように、CSSリセットファイルを取得します。

これにより、設計者/開発者が怠惰になり、コードを逐語的に切り取って貼り付けるのを防ぐことができれば幸いです。

Stuに感謝します、それは完全に合理的な考えだと思います。

実際、Eric Meyerリセットの新しいバージョンは、コメントを追加するだけではありません。 :focusルールのデフォルト値を残すことについて

…目に見えないフォーカスを定義することは、元のリセットの最大の失敗でした。 後から考えると、これは明らかに強制されていないエラーですが、リセットを公開したとき、文字通り、1000のサイトとフレームワークに盲目的にコピーされる(または、さらに悪いことに、ホットリンクされる)という概念はありませんでした。 私はスタイルシートで、フォーカススタイルを定義する必要があると言っていました…すべてを「プレーンベースライン」にすることで、思いやりのある職人は、サイトのデザインに最も適したフォーカススタイルを定義するように促されます。 代わりに、すべての職人ではなく、多くの人々がリセットをコピーし、それを考えずにその上に構築したため、フォーカスのアウトラインは大規模に抹消されました。

リセットの最新バージョンでは、Ericは次の表記法を使用し、ルール全体をコメントアウトして?????を使用します。 置き換えることができるプレースホルダーとして:

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

たぶん同じアプローチをここで使用できますか?

Eric Meyerのリセットでの元のoutline削除は、重大なアクセシビリティの問題(デフォルトのリセットの失敗)を引き起こしたため、破壊的でした。 ::selection背景に別の色を使用しても、その問題は発生しません。

:: selectionカラー宣言はIMOを避ける必要があります。 それはウィンドウの非アクティブなスタイリング(http://css-tricks.com/9288-window-inactive-styling/)を殺しますが、これはすでにそれ自体が理由です。

ええ、私たちはこれを知っています。 ただし、強調表示でのテキストシャドウの問題は、非アクティブな選択スタイルよりもユーザーにとって大きな問題である可能性が非常に高くなります。 私にとっての問題は、サイトでtext-shadow使用されていない場合でも(サイトにテキストシャドウがある場所でユーザーを保存するために)、デフォルトでこれを含めるか、移動するかのバランスが取れているかどうかです。 「それをより良くする」ために。

これはしばらくの間ボイラープレート(および野生)にあり、問題が存在する唯一の理由は私がそれを作成したためであることに注意する価値があります。 ですから、どちらにしても大したことではないでしょう。

「ハイライトされたテキストに特定の色やサイズのテキストシャドウも含まれていると、混乱して見える可能性があります。したがって、ハイライトされたときのテキストシャドウの問題を回避したい場合は、:: selectionの背景と色を宣言する必要があります。」

まあ、私たちは人々が悪い設計上の決定をするのを防ぐことはできません。 text-shadow 、ほとんどの場合、本文のコピーには使用しないでください。

それでもそのルートを使用したい場合は、ブラウザのデフォルトの色を使用することをお勧めします。

前述のCSSでの私の考え方は、次のようになります。

/ _--あなたのデザインに合うようにこの色を変更することを忘れないでください--_ /

最初:それを残すための+1。

私のコメントの残りは主に問題を提起した人々のためのものです(それは@necolasと@sturobsonになります):

選択ハイライトの正しい色を判断することはできません。 この議論が有効である場合、アンカータグ(ワームの別の缶)の「理想的な」色についても議論する必要があることを議論することができます。

重要なのは、これは完全に設計に依存するものであり、アンカータグと同様に、設計者が保守/更新する必要があるということです。

ホットピンクが大好き! しかし、それを嫌う人は、CSSファイルの下部に次のルールを追加して更新してください。

::-moz-selection { background: #fe57a1; color: #fff; }
::selection { background: #fe57a1; color: #fff; }

私はPaulLloydに代わって問題を記録しただけです。

しかし、議論は完全に有効です。 デフォルトの定型リンクの色は、実際には、最新のブラウザのデフォルトに一致するように正規化されています。

@sturobsonこれらの行に沿ってコメントを追加しました: https

そのコメントの追加による影響はゼロだと思いますが、少なくともそれは正しい方向への一歩です。 この問題のニコラスをフォローアップしていただきありがとうございます。

デフォルトの定型リンクの色は、実際には最新のブラウザのデフォルトに一致するように正規化されています。

どちらが疑問を投げかけますか、同じ方法で選択色を正規化してみませんか? ある種の「名誉のバッジ」としてホットピンクが着用されている方法は、かなり悲しい状況です。

そして....シーン!

私はおそらくこれをホットピンクに戻すことで私の人生の80時間を失ったでしょう。

カラーコードを取得するためにこのスレッドを見つける必要があるたびに。

なぜ設定しないのかは気にしない、選択は常にピンク色になります!

@innovandrew親指を立てる!

このページは役に立ちましたか?
0 / 5 - 0 評価