:root isn’t global | Kilian Valkhof
Most developers prefer to keep all their CSS custom properties in one place, and a pattern that has emerged in recent years is to put those on :root, a pseudo-class that targets the topmost element in your document (so that's always <html> on web pages). But just because they're in one place and in the topmost element, it doesn't mean they're global. I first encountered this issue with ::backdrop:
CSS Values and Units Module Level 3
CSS Values and Units Module Level 3 W3C Candidate Recommendation Draft, 22 March 2024 More details about this document This version: https://www.w3.org/TR/2024/CRD-css-values-3-20240322/ Latest published version: https://www.w3.org/TR/css-values-3/ Editor's Draft: https://drafts.csswg.org/css-values-3/ History: https://www.w3.org/standards/history/css-values-3/ Implementation Report: https://draft
Position: stuck; — and a way to fix It
Sticky elements or frozen panes — as you might know them by — have been around forever in software programs — especially in rows/columns based applications such as Microsoft Excel. Sticky elements are also widely used in mobile (native) applications and in web design. Such elements help users keep a sense of perspective when sorting through long lists or keeping track of their order details when s
Release v5.2.1 · IBM/plex
👍 76 syncra, tani1987, phut-tran, kgxxx, masterTwig-0902, Aki-Toyo, naokiy, pekeq, zonuexe, yakumo-saki, and 66 more reacted with thumbs up emoji 😄 5 mjabbink, chuck0523, moesuke, Ren33000, and alisonjoseph reacted with laugh emoji 🎉 55 jamesrwaugh, acid-chicken, tsukumijima, azu, sheepla, msksk, AndroPlus-org, amplextro, omega-takai, syncra, and 45 more reacted with hooray emoji ❤️ 36 yabuki,
Pure CSS Horizontal Scrolling | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site! I’d be nice if we could
Sassを@importから@useに置き換えるための手引き - kojika17
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
line-break - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
word-spacing - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
レイアウトプリミティブ
DIST.30 「一歩差がつくCSSテクニック」にてライトニングトークをさせていただく機会がありました。この記事はそこでお話しした内容をもとに書き起こしたものです。 私が業務で携わるのはおもに、メディアサイトやコーポレートサイトのようなページ数がたくさんあるサイトの制作です。そのようなサイトでは特に、ページのテンプレートやコンポーネントをいかに堅牢な設計にできるかが重要だと感じます。 連想されるトピックとしては「CSS設計」がありますが、私見としては、CSS設計はセレクタの書き方やコンポーネントの整理の方法について述べたものであって、いかにしてレイアウトを組み立てるかという議論にはあまり踏み込んでいません。 具体的には、どのように宣言を組み合わせるか、どのようにレスポンシブにするかのような曖昧な領域については、実装において必ず意識される部分であるにも関わらず言及される場面は少ないのではない
令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese - Speaker Deck
🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠 2020年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ --- OSやブラウザのアップデートによりウェブサイトのフォントは影響を受けてきました。最近だとiOS 13 Safariでフォントが激太りを起こしたり、macOS CatalinaとChromeの組み合わせで明朝体化するウェブサイトが多発しました。 他にも「ＭＳ Ｐゴシック」の呪縛、「游ゴシック」の薄さ問題、アンチエイリアスの変化など問題はつきません。このライトニングトークでは、現代の最適解としてのフォント指定を紹介します。 Website fonts have been affected by OS and Browser updates. R
擬似要素を利用したベースライン・グリッド
Fig 1: 擬似要素を利用してテキストをベースライン・グリッドに揃える CSS でテキストをベースライン・グリッドに揃えるとなると、ベースラインの高さに応じて上下のパディングやマージンを調整するアプローチがよく見受けられますが、あまり実用的なものとは言いがたかったと思います。 p { padding-top: 0.30116em; padding-bottom: 0.19884em; /* ... */ } しかし、::before と ::after 擬似要素を利用すると、かんたんにベースライン・グリッドに合わせることができます (Fig 1)。 /* Vertical rhythm unit: 0.5rem */ p { line-height: 1.5rem; margin: 0.5rem 0; } p::before, p::after { content: ""; displa
Your Body Text Is Too Small | Marvel Blog
Body text is the key component in communicating the main bulk of a message or story, and it’s probably the most important element on a website, even if people sometimes read just the headlines. Why would we limit the effectiveness of body text by minimizing its size to a browser-default that’s now over 20 years old, even on large displays? What’s Too Small? The majority of websites are still anywh
アクセシビリティを改善するために、通常の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
Dark modes with CSS | CSS-Tricks
With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme which lets us detect whether the user has dark mode enabled with a media query. Safari Technology Preview 71 also has supported-color-schemes, which… well, I couldn’t exactly tell you what that does. The media query is like this: @media (prefers-color-scheme: dark) { } I
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Customize web font performance with font-display settings
scrollbar-color | CSS-Tricks
CSSRule: cssText プロパティ - Web API | MDN
Layouts
新しい API
