HTMLのDNAをCSS属性セレクターでつなぎ合わせる

私のキャリアのほとんどにおいて、属性セレクターは科学よりも魔法でした。 印刷スタイルシートにリンクを出力するためのCSSをじっと見つめ、何も理解していませんでした。 私は忠実にコピーし、それを印刷スタイルシートに貼り付けてから、実行して、最大の燃えているゴミの山であるプロジェクトをすべて出しました。

しかし、CSS属性セレクターをじっと見つめる必要はもうありません。 この記事の終わりまでに、それらを使用してサイトで診断を実行し、他の方法では解決できない問題を修正し、魔法のように感じるほど高度な技術的経験を生成します。 私が約束しすぎていると思うかもしれませんし、あなたは正しいと思うかもしれませんが、属性セレクターの力を理解すると、自分を誇張したくなるかもしれません。

最も基本的なレベルでは、HTML属性を角かっこで囲み、次のように属性セレクターと呼びます。

 [href] { color: chartreuse; }

hrefがあり、より具体的なセレクターがない要素のテキストは、魔法のようにシャルトリューズに変わります。 属性セレクターの特異性はクラスと同じです。

注： CSSの特異性であるケージマッチの詳細については、「CSSの特異性：知っておくべきこと」またはスターウォーズが好きな場合は「CSSの特異性ウォーズ」をお読みください。

ただし、属性セレクターを使用すると、さらに多くのことができます。 DNAと同じように、あらゆる種類の属性の組み合わせと値を選択するのに役立つロジックが組み込まれています。 タグ、クラス、またはIDセレクターのように完全に一致するだけでなく、任意の属性、さらには属性内の文字列値にも一致する可能性があります。

属性選択

属性セレクターは、単独で使用することも、より具体的にすることもできます。つまり、 title属性を持つすべてのdivタグを選択する必要がある場合です。

 div[title]

ただし、次のようにして、タイトルを持つdivの子を選択することもできます。

 div [title]

明確にするために、それらの間にスペースがないということは、属性が同じ要素上にあることを意味し（スペースのない要素とクラスのように）、それらの間にスペースがあるということは、子孫セレクター、つまり属性を持つ要素の子を選択することを意味します。

属性の値を含む属性の選択方法をより細かくすることができます。

 div[title="dna"]

上記は、正確なタイトルが「dna」のすべてのdivを選択します。 「DNAは素晴らしい」または「dnamutation」というタイトルは選択されませんが、これらの各ケース（およびそれ以上）を処理するセレクターアルゴリズムがあります。 すぐにそれらに到達します。

注：ほとんどの場合、属性セレクターに引用符は必要ありませんが、明確さが増し、エッジケースが適切に機能することを保証するため、引用符を使用します。

「mybeautifuldna」や「mutatingdnais fun！」など、スペースで区切られたリストから「dna」を選択したい場合。 等号の前に、チルダまたは「波線」を追加できます。

 div[title~="dna"]

「dontblamemeblamemydna」や「his-stupidity-is-from-upbringing-not-dna」などのタイトルを選択してから、ドル記号$を使用してタイトルの末尾に一致させることができます。

 [title$="dna"]

「dnamutants」や「dna-splicing-for-all」のタイトルなどの属性値の先頭を一致させるには、キャレットを使用します。

 [title^="dna"]

完全に一致させることは役に立ちますが、選択が厳しすぎる可能性があり、キャレットのフロントマッチがニーズに対して広すぎる可能性があります。 たとえば、「genealogy」というタイトルを選択したくないが、「gene」と「gene-data」の両方を選択したい場合があります。 パイプ文字（または垂直バー）はまさにそれです。 完全一致を行いますが、完全一致の後にダッシュが続く場合も含まれます。

 [title|="gene"]

最後に、任意の部分文字列に一致する完全な検索属性演算子があります。

 [title*="dna"]

ただし、上記は「I-like-my-dna-like-my-meat-rare」、「edna」、「kidnapping」、「echidnas」（エドナが実際に行うべきではないこと）と一致するため、賢明に使用してください。 ）。

これらの属性セレクターをさらに強力にするのは、スタック可能であるということです。これにより、複数の一致する要素を持つ要素を選択できます。

しかし、タイトルがあり、クラスが「genes」で終わるタグを見つける必要がaますか？ 方法は次のとおりです。

 a[title][class$="genes"]

HTML要素の属性を選択できるだけでなく、疑似「科学」（疑似要素とコンテンツ宣言を意味する）を使用して、変異した遺伝子を印刷することもできます。

 <span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span>

 .joke:hover:after { content: "Answer:" attr(title); display: block; }

上記のコードは、ホバーでこれまでに書かれた最悪のジョークの1つに対する答えを示しています（はい、私はそれを自分で書きました、そして、はい、それを「ジョーク」と呼ぶのは寛大です）。

最後に知っておくべきことは、フラグを追加して、属性検索で大文字と小文字を区別しないようにすることができるということです。 閉じ角括弧の前にiを追加します。

 [title*="DNA" i]

したがって、「dna」、「DNA」、「dnA」、およびその他のバリエーションと一致します。

これの唯一の欠点は、 iがFirefox、Chrome、Safari、Opera、およびわずかなモバイルブラウザでしか機能しないことです。

属性セレクターを使用して選択する方法を確認したので、いくつかのユースケースを見てみましょう。 私はそれらを2つのカテゴリーに分けました：一般的な使用と診断。

一般的な用途

入力タイプ別のスタイル

電子メールと電話など、入力タイプのスタイルを変えることができます。

 input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }

電話リンクを表示する

特定のサイズの電話番号を非表示にし、代わりに電話リンクを表示して、電話での通話を簡単にすることができます。

 span.phone { display: none; } a[href^="tel"] { display: block; }

内部リンクと外部リンク、セキュアと非セキュア

内部リンクと外部リンクを異なる方法で処理し、安全なリンクを安全でないリンクとは異なるスタイルにすることができます。

 a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }

アイコンをダウンロード

HTML5が私たちに与えた属性の1つは、ブラウザに、ファイルを開こうとするのではなく、そのファイルをダウンロードするように指示する「ダウンロード」でした。 これは、ユーザーにアクセスしてもらいたいが、今は開かないようにしたいPDFやDOCに役立ちます。 また、大量のファイルを連続してダウンロードするためのワークフローも簡単になります。 download属性の欠点は、従来のリンクと区別するデフォルトのビジュアルがないことです。 多くの場合、これはあなたが望むものですが、そうでない場合は、以下のようなことを行うことができます。

 a[download]:after { content: url(download-arrow.svg); }

PDF、DOCX、ODFなどのさまざまなアイコンを使用してファイルタイプを通信することもできます。

 a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }

属性セレクターをスタックすることで、これらのアイコンがダウンロード可能なリンク上にのみ存在することを確認することもできます。

 a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }

廃止された/廃止されたコードを上書きまたは再適用する

私たちは皆、古いコードを持っている古いサイトに出くわしましたが、コードを更新することは、6000ページでそれを行うのにかかる時間の価値がない場合があります。 HTML5の前に、属性として実装されたスタイルをオーバーライドまたは再適用する必要がある場合があります。

 <div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }

特定のインラインスタイルをオーバーライドする

時々あなたは作品をぎこちなくしているインラインスタイルに出くわすでしょう、しかしそれらはあなたのコントロールの外のコードから来ています。 理想的な方法で変更できるかどうかを言う必要がありますが、できない場合は、回避策を次に示します。

注：これは、オーバーライドする正確なプロパティと値がわかっている場合、および表示される場所でオーバーライドする場合に最適に機能します。

この例では、要素のマージンはピクセル単位で設定されていますが、ユーザーがデフォルトのフォントサイズを変更した場合に要素を適切に再調整できるように、要素を拡張してemで設定する必要があります。

 <divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; }

注：このアプローチは、このスタイルをオーバーライドする必要があるかのように、細心の注意を払って使用する必要があります!important戦争に陥り、子猫が死んでしまいます。

ファイルタイプの表示

ファイル入力に使用できるファイルのリストは、デフォルトでは表示されません。 通常、それらを公開するために疑似要素を使用します。ほとんどのinputタグ（またはFirefoxやEdgeではまったく）で疑似要素を実行することはできませんが、ファイル入力で使用することはできます。

 <input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }

HTMLアコーディオンメニュー

あまり公表されていないdetailsとsummaryタグデュオは、HTMLだけで拡張可能/アコーディオンメニューを作成する方法です。 詳細は、アコーディオンが開いているときに表示するsummaryタグとコンテンツの両方をラップします。 要約をクリックすると、 detailタグが展開され、オープン属性が追加されます。 open属性を使用すると、 detailsタグとは異なる方法でdetailsタグのスタイルを簡単に設定できます。

 <details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details>

 details[open] { background-color: hotpink; }

リンクの印刷

印刷スタイルでURLを表示することで、属性セレクターを理解することができました。 あなたは今それを自分で構築する方法を知っているべきです。 hrefを使用してすべてaタグを選択し、疑似要素を追加して、 attr()とcontentを使用してそれらを出力するだけです。

 a[href]:after { content: " (" attr(href) ") "; }

カスタムツールチップ

カスタムツールチップの作成は、属性セレクターを使用すると楽しく簡単です（私のようなオタクなら楽しいですが、どちらの方法でも簡単です）。

注：このコードを使用すると、一般的に近くにいるはずですが、サイトの環境や、私よりも趣味が良いかどうかによっては、間隔、パディング、配色を微調整する必要がある場合があります。

 [title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }

AccessKeys

Webの優れた点の1つは、情報にアクセスするためのさまざまなオプションを提供することです。 まれにしか使用されない属性の1つは、アクセスキーを設定して、キーの組み合わせとアクセスキーによって設定されたaccesskeyを介してアイテムに直接アクセスできるようにする機能accesskey （正確なキーの組み合わせはブラウザーによって異なります）。 しかし、Webサイトにどのキーが設定されているかを知る簡単な方法はありません。

次のコードは、 :focusにこれらのキーを表示します。 accesskeyが必要な人はほとんどの場合、マウスの使用に問題があるため、 hoverには使用しません。 これを2番目のオプションとして追加できますが、それが唯一のオプションではないことを確認してください。

 a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }

診断

これらのオプションは、ビルドプロセス中、または問題の修正を試みているときにローカルで問題を特定するのに役立ちます。 これらを本番サイトに配置すると、ユーザーにエラーが発生します。

コントロールのないオーディオ

audioタグはあまり使用しませんが、使用する場合は、 controls属性を含めるのを忘れることがよくあります。 結果：何も表示されません。 Firefoxで作業している場合、このコードは、オーディオ要素が非表示になっている場合や、構文またはその他の問題によって表示されない場合に役立ちます（Firefoxでのみ機能します）。

 audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }

代替テキストなし

代替テキストのない画像は、ロジスティクスとアクセシビリティの悪夢です。 ページを見ただけでは見つけにくいですが、これを追加するとすぐに飛び出します。

注：境界線が要素の幅に追加され、レイアウトが混乱する可能性があるため、境界線border代わりにoutlineを使用します。 outlineは幅を追加しません。

 img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }

非同期Javascriptファイル

Webページは、サイトがダウンしていて上司を恐れているためにTed（3つのキュービクルの上に座っている）が休暇中に書いたコンテンツ管理システムとプラグインおよびフレームワークとコードの集合体である可能性があります。 JavaScriptが非同期でロードするものとそうでないものを把握することは、ページのパフォーマンスを向上させる場所に集中するのに役立ちます。

 script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }

Javascriptイベント要素

JavaScriptイベント属性を持つ要素を強調表示して、JavaScriptファイルにリファクタリングすることもできます。 ここではOnMouseOver属性に焦点を当てましたが、これはどのJavaScriptイベント属性でも機能します。

 [OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }

隠しアイテム

非表示の要素または非表示の入力がどこにあるかを確認する必要がある場合は、次のように表示できます。

 [hidden], [type="hidden"] { display: block; }

しかし、これらすべての驚くべき機能を使用すると、キャッチが必要だと思います。 確かに、属性セレクターは、Chromeでフラグが立てられている間、またはSafariのエッジにあるFieryFoxesのナイトリービルドでのみ機能する必要があります。 これはあまりにも良すぎて真実ではありません。 そして、残念ながら、落とし穴があります。

最も愛されているブラウザー（つまり、IE6）で属性セレクターを操作したい場合は、それを行うことはできません。 （大丈夫です。涙を流してください。判断はありません。）他のほとんどの場所に行ってもいいです。 属性セレクターはCSS2.1仕様の一部であるため、10年の大部分の間ブラウザーに使用されてきました。

したがって、これらのセレクターはもはや魔法のようなものではなく、十分に高度なテクノロジーとして明らかにされているはずです。 彼らは魔法よりも科学であり、あなたが彼らの最も深い秘密を知った今、それはあなた次第です。 出て行って、ウェブ上で科学の神秘的な驚異に取り組みましょう。