アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。 a11y css reset -GitHub a11y css resetの特徴 a11y css resetの中身 a11y css resetの使い方 a11y css resetの特徴 a11y css resetはWebページをアクセシブルにするために、既定のスタイル定義をリセットするための小さなグローバルルールをまとめたCSSファイルです。 CSSにはアクセシビリティに有用なスタイルが定義されています。例えば、.visually-hiddenではコンテンツを視覚的に隠すのみでなく、スクリーンリーダーでもアクセス可能です。 参考: Writing CSS
CSSリセットにも新しい動きが！最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy
最近、CSSのリセットを見直す動きが少しずつあるようです。 2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説、CSSリセットの2019年用私流カスタマイズ方法など、当ブログでもCSSリセットの記事を公開しました。 今回紹介するのはMozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたCSSリセットです。 CSS Remedy -GitHub CSS Remedyの特徴 CSS Remedyのコード CSS Remedyの特徴 CSS RemedyはMozilla Developerによる、CSSリセットの新しいプロジェクトです。 CSSリセットの今までの流れ 何年もの間、リセット用やベース用のスタイルシートは、Web制作者がより早く作業を始めるのに役立ちました。 初期のリセットではすべて
normalize.css 8.0.0がリリース！古いブラウザはサポート対象外になり、大幅に軽量化
利用しているWeb制作者も多いと思います。 normalize.cssがアップデートし、8.0.0がリリースされました。 IE9以下をはじめとする古いブラウザのサポートがなくなったので、大幅に軽量化されています。v6.0.0は2.2KB、v7.0.0は2.3KBだったのが、v8.0.0で1.8KBです。 normalize.css -GitHub normalize.css 8.0.0の変更点 2018年2月にリリースしたnormalize.css 8.0.0の変更点です。 Android 4, IE9以下, Safari7以下など、古いブラウザのサポートを削除。 Chrome, Safariの検索入力のキャンセルボタンを削除しない。 フォームの要素にはfont-familyを継承するように記述。 Safari 8以降で、テキストの装飾を修正。 古いブラウザのサポートを削除 article
[CSS]便利なのが登場！normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize
ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートを紹介します。 「box-sizing: border-box;」の採用など、今の実装方法に最適化されています。 modern-normalize -GitHub modern-normalizeの特徴 modern-normalizeの使い方 modern-normalizeの中身 modern-normalize.min.css modern-normalizeの特徴 modern-normalizeは、ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートです。 normalize.cssとの相違点 軽量で、コンパクト。 最新のモダンブラウザをサポート。 「box-sizing
![[CSS]便利なのが登場！normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize](https://cdn-ak-scissors.b.st-hatena.com/image/square/32e42f3186513ca146bc17f335bf09317b572c18/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018021101.png)
CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
俺の CSS リセット: 2011 冬
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
リセットCSSを比較できるWebサービス{ CSS:resetr } | Web活メモ帳
各ブラウザのスタイルシートを初期化するために使われるリセットCSSを比較できるWebサービス「{ CSS:resetr }」をご紹介。 YUI、Vanilla Resetなど人気のリセットCSSをプルダウンで選択し、使用したいHTML構造を選択するだけで簡単に比較できるようになっています。 使ってみた様子 サイトでは見出しやリスト構造、テーブルなどの比較ができるようになっています。 今回はフォーム要素で比較してみました。 ■ Yahoo! Reset 2の場合 ■ HTML5 Dr. Resetの場合 ■ Vanilla Resetの場合 それぞれに特徴がありますね。 各ブラウザのスタイルの違いを見るのに覚えておいても良いかもしれません。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
