HTML/CSS

https://caniuse.com/?search=sticky 備忘録。IE以外でほぼ使えるようになっていたこと知らなかった。

レスポンシブデザインが流行ってからすっかりwidth属性とheight属性は見なくなったが、これらは必ず記述する必要がある。 理由としては昨今各ブラウザでレイアウトシフト（一度サイズを計算してから再度計算をし直す実装をす …

“imgタグには必ずwidthとheight属性を記述する” の続きを読む

prefers-color-schemeを使用してCSSやJavaScriptを使って判定をする。 機能はオンオフできるようにするというアクセシビリティの原則に基づき、チェックボックスなどでダークモードをオンオフできるよ …

“ダークモード対応基礎” の続きを読む

Referrer-Policy ヘッダを追加する。

初心者のコーダーのサイトでなぜかスマホでの表示が安定せず、ページ移動時にスクロール位置がずれる現象が起きていた。 WordPressやCloudFlareや、さまざまなJSを使っていたが、コンソールにエラーがないし、原因 …

“ビューポートの設定は絶対書けよ！！！” の続きを読む

backdrop-filter ぼかし。FireFoxとIE以外は大体使える。 background-clip、text-fill-color background-clipは背景の配置調整、text-fill-colo …

“2020年よく使うCSS” の続きを読む

画像の切り抜きなどをCSSで行いたい場合、clip-pathが便利。ただしIEは未対応。 SVG要素も指定することができる。

危険な理由 「リンクを開いた先のページでのJavaScriptによって、開いた元のページを操作できてしまう」から。たいていのブラウザは「target=”_blank”」によって別タブで開かれたペー …

“target=”_blank”の脆弱性をわかりやすく” の続きを読む

@pageディレクティブでページ全体の余白の調整。 単位はmmがよく利用される。 @media print { @page { margin: 5mm; } } 印刷では、ウェブ上での１ページが複数ページになるため、見出 …

“印刷用CSSでよく設定されているパターン” の続きを読む

IEやEdge、Androidの一部のブラウザでは:before、:after擬似要素にtransitionやanimationをかけると、その要素がスムーズにアニメーションしなかったり、あるいは周辺の要素に同時にアニメ …

“transition・animationがスムーズじゃないと思ったら” の続きを読む