[B! css][DOM] cyber_snufkinのブックマーク

cyber_snufkin id:cyber_snufkin

cssとDOMに関するcyber_snufkinのブックマーク (3)

DOMDOMタイムス#12: classの大文字小文字の区別をねじれさせてみよう！
<!DOCTYPE html> <html> <head></head> <body> <div id="container"> <style id="style"> .xFoo { color: blue; } .xfoo { color: red; } </style> <div id="target" class="xFoo">class:xFoo, so it should be blue</div> </div> </body> </html> さて、このとき「id=targetのdiv要素が赤色(.xfooの色)になる」ことはありえるでしょうか？ただし、下記3条件が成立しているとします。 styleは当該styleタグ以外のどこからも指定されていないし、変更もされていない div要素が赤色になっている時document.compatModeは'CSS1Compat'であるブ
cyber_snufkin 2023/12/01
DOM

css

FrontEnd

あとで読む
リンク
[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法
ページの端から端まで伸びる背景があり、コンテンツは両端に空白があり、中央に配置されています。ここ数年で増えてきたレイアウトです。この内側のコンテナを実装するさまざまな方法、それぞれの利点と欠点、解決方法を紹介します。 The “Inside” Probl em 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。最近のWebでよく見かけるレイアウト古典的な解決策: 外側と内側のコンテナ単一の要素だけの場合コントロールが可能なコンテナがある場合親にoverflow-xを使用しなくてもいい場合 CSS GridまたはFlexboxは役立ちますか？代わりに、端をフェイクする最近のWebでよく見かけるレイアウトあなたはWebページの実装に取り組んでいます。レイアウトには端から端まで水平方向に伸びるbackground-colo
cyber_snufkin 2019/06/10
web

レイアウト

HTML

DOM

css

あとで読む
リンク
ブラウザのCSS解釈方法についての衝撃事実 - Qiita
上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行していると思っていました。 1. 　sampleクラスを見つける 2. 　1の子孫のtable要素を見つける 3. 　2の子孫のtd要素を見つける 4. 　文字色を赤くする正しい見解上記のようなコードがあったとき、以下の順序でブラウザは解釈・実行しているらしいです。 1. 　全てのtd要素を見つける 2. 　1の先祖要素にtable要素が存在するかを確認 3. 　2のtable要素の先祖要素にsampleクラスが存在するかを確認 4. 　文字色を赤くするこのように、CSSセレクタは右から左へと照合されていきます。 ※一番右側のセレクタは、キーセレクタと呼ばれるらしいです何が問題か？例えば、以下のようなHTMLコードがあったとします。上記のCSSコードでsampleクラス配下の表の文字色を赤くしようとすると、まずDO
cyber_snufkin 2017/09/19
css

DOM
リンク
1