コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

CSS

Object-Oriented Conference 2024​​で『オブジェクト指向CSSが叶えたかったことと、CSSのいま』という登壇をしてきました

発表したスライド speakerdeck.com 16時からTrack Dで話すスライドを事前にアップしました。おそらくめちゃくちゃ早口で捲し立てる感じになるのと、細かいコードなどが見づらいと思うのでお手元で見ていただければ!#ooc_2024_d #ooc_2024https://t.co/8BmAR…

CSSの詳細度(Specificity)に関してざっくりまとめる

いつも仕様を忘れてしまうので自身のメモとしてざっくりまとめる 仕様について Selectors Level 4 - 17. Calculating a selector’s specificity 詳細度と他の要素の関係 詳細度以前に順番を決めるルールが存在するが、それは別の記事で記載したのでそちらを…

2024年1月時点のCSS記述の採用順番についてざっくり理解する

import! がどうやって適応されていくのかの原理を理解する。 出典元 2024年時点だとLevel4の資料がベースになるのでそれを今回をベースに記載する。 CSS Cascading and Inheritance Level 4 どこの記述が利用されるかを決める "Cascade Sorting Order" CSSの…

オブジェクト指向CSS(OOCSS)とは何なのかをざっくりまとめる

提唱元のスライド Object Oriented CSS | PPT OOCSSが提唱された2009年頃のCSS事情 OOCSSが提唱された2009年頃は、再利用性を鑑みたCSSは少なく、ページ単位でCSSを置くことが多い時代でした。またSassなども本格的に流行する前だったため、動的に何かを生成…

ハイフネーション(hyphenation)に関してざっくりまとめる

ハイフネーションという概念に関して理解が浅かったのでざっくりまとめる。 語源 英語版のWikipediaによると The hyphen is a punctuation mark used to join words and to separate syllables of a single word. The use of hyphens is called hyphenation.…

CSSにおけるVendor Prefixとはどういうもので、何があるのかざっくりまとめる

CSS

非常にググりにくい -moz- や -webkit- などがつくCSSの要素についてざっくりまとめる Vendor Prefix(ベンダープレフィックス)とは MDNには以下のような記載がある ブラウザーベンダー (提供元) は、時に試験的または非標準な CSS プロパティおよび JavaSc…

CSSにおいて疑似要素はコロン2つ、擬似クラスはコロン1つにすると良い

CSS

なんか混在しているものを見るので自分自身のためのまとめ。 TL;DR 現状の疑似要素のスタンダードな仕様はコロン2つで書く IE8などCSS2準拠のブラウザではコロン1つで定義されているが、多くがCSS3に対応している2021年時点では考えなくても良い要素 そもそ…

CSSにてスタイルシート内だけで値を数式で割り当てるcalcの使い方

CSS

逆引きのことばを言い換えて記事として残そうシリーズ 出典元 calc() - CSS: カスケーディングスタイルシート | MDN MDNには詳細な記述はないが、InternetExplorer9も部分対応している 記述例 全体の幅よりも20px小さくしたい場合 width: calc(100% - 20px);…

FLOCSSではJavaScript由来の状態を司るのに is-* プレフィックスを使うと良さそう

CSS

ここだけコンセプト説明が手薄なので補ってみる 出典 Modifierの命名の派生パターンとして、JavaScriptで操作されるような「状態」を表すようなModifierについては、SMACSSのStateパターンの命名を拝借し、is-*プレフィックスを付与し、.is-activeというよう…

CSSの!importantはなるべく使わないためには

CSS

案外、これに関して言及しているところがないので書いてみる CSSの!importantとは CSSの反映されるものを決める 詳細度 という概念があるが、そこで決まる順番とは関係なく設定できる記述 例 cssは後勝ちなので、後の記述のほうが優先されるが、以下の例の場…

FLOCSSのレイヤを表に簡単にまとめる

CSS

一覧でドーンみたいのがほしかったので 分類表 レイヤーの分類 大きく「Foundation」「Layout」「Object」のレイヤーに別れ Objectは3つの種類がある。 分類 粒度感 主な例/パーツ 接頭辞 Foundation ブラウザ全体にかかる打ち消し用や修正の部分 reset.css …

cssのfont-size 100%を最上段のhtmlタグに対してセットするとブラウザの種類や状態によって変わってくれる

あー、そうやって相対値をはじき出すほうほうもあるんだ。というメモ 情報の出元 パーセンテージ指定でフォントサイズを指定しておくと、ブラウザのデフォルトのフォントサイズ(通常は 16px = 12pt)や、ユーザが設定したフォントサイズが正しく反映されて…

BEMとMindBEMdingの命名規則の違い

BEMを元にした考え方がMindBEMdingなんですが、地味に命名規則(というかModifireの使い方)が違うのでメモ 比較元 BEM Quick start / Methodology / BEM MindBEMding MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS Architecture, …