Cascade Layers Guide | CSS-Tricks
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
Subsetting Font Awesome to Improve Performance | CSS-Tricks
Font Awesome is an incredibly popular icon library. Unfortunately, it’s somewhat easy to use in a way that results in less-than-ideal performance. By subsetting Font Awesome, we can remove any unused glyphs from the font files it provides. This will reduce the number of bytes transmitted over the wire, and improve performance. Let’s subset fonts together in a Font Awesome project to see the differ
scroll-timeline CSS property - CSS | MDN
/* One value */ scroll-timeline: none; scroll-timeline: --custom_name_for_timeline; /* Two values */ scroll-timeline: --custom_name_for_timeline block; scroll-timeline: --custom_name_for_timeline x; scroll-timeline: none inline; scroll-timeline: none y; /* Global values */ scroll-timeline: inherit; scroll-timeline: initial; scroll-timeline: revert; scroll-timeline: revert-layer; scroll-timeline: u
The Focus-Indicated Pseudo-class :focus-visible
The “focus indicator”, as its name suggests, visually indicates (often with a kind of an outline) that an element has focus. That sounds simple enough, and it perfectly describes what the old :focus selector makes possible. However, for decades now, whether a browser will actually display a focus indicator natively has been a considerably more complex affair. Focus indicator on different elements
Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!
I'm very excited to announce @parcel/css, a new CSS parser, compiler, and minifier written in Rust! Check it out on GitHub, or try a live demo right in your browser. Parcel CSS has significantly better performance than existing tools, while also improving minification quality. In addition to minification, Parcel CSS handles compiling CSS modules, tree shaking, automatically adding and removing ven
Native CSS support · Issue #14893 · webpack/webpack
Current State: opt-in via experiments.css: true Explainer (not everything is implemented yet): experiments.css: true enables the native css support in webpack This will be enabled by default in webpack 6 There will be multiple modes depending on how you reference CSS A: import "./style.css": Attaches the stylesheet to the document as side effect of importing. @import and url() are resolved. B: imp
Container Queries | 12 Days of Web
Updated September 2022 CSS Container Queries are an upcoming way to move beyond media queries that are tied to the viewport and instead will enable us to modify an element's behavior based on the container it's within. This has been a requested feature for many years, with developers desiring to change an element based on its own width. However, the in-progress spec will allow querying for other p
ざっくりつかむ CSS設計|マイナビブックス
ざっくりつかむ CSS設計 著作者名：高津戸 壮 書籍：3168円 電子版：3168円 B5変：272ページ ISBN：978-4-8399-7766-5 発売日：2021年12月23日 備考：リフロー版は2022年1月18日発売予定 内容紹介 Web制作の現場でこれだけは知っておきたい、CSSの扱い方、管理、運用の基本！ Web開発が複雑化した現在、CSSについても仕様や知識を知っているだけでは対応できない問題が増えています。 破綻しないCSSを組むには、どのように考えて設計すればよいか？ デザイナーや他の開発者と連携する場合のルール作りは？ ReactやVue.jsを使ったWeb開発の案件の場合はどうしよう？ Sassなどを使ってビルドする場合は？ ……などなど。 本書は、これからWebサイト制作・開発の現場に入る人や、現場で悩んでいる人を対象に、CSSの設計についてわかりやすく解説す
CSS in 2022
Things have been going hard for CSS in 2021. The CSS Working Group has cranked out a ton of work, polishing existing CSS features and specifying lots of new ones too — with experimental implementations already having landed in several browsers. Apart from supporting new features, browser vendors also focussed on fixing the top 5 browser compatibility painpoints (#compat2021) to make our dev-lives
Defensive CSS
I spent years teaching CSS layout on this blog. I put everything I know into The Layout Maestro course: 70+ lessons and 150+ interactive examples that teach you how to think CSS layouts, not just memorize syntax. 👋 This article has been expanded into a new project called Defensive CSS. Due to the fact that the content here will not be updated, I recommend you to read defensivecss.dev instead. Oft
CSS me not
Stoyan Stefanov (@stoyanstefanov) is an ex-Facebook and Yahoo! engineer, writer ("JavaScript Patterns", "React: Up and Running"), speaker (JSConf, Velocity, Fronteers), toolmaker (Smush.it, YSlow 2.0) and a guitar hero wannabe. Happy 25th birthday CSS! Yes, today marks 25th year of CSS’ existence. Source. Contrary to what some may have you believe, CSS is not the worst. CSS is lovely, CSS is empow
The State of CSS 2021
Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey resu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[css-contain-2] Proposal: content-visibility: hidden-matchable · Issue #5595 · w3c/csswg-drafts
daisyUI - Tailwind CSS Component Library
[css-cascade-5] Reconsider placement of unlayered styles, for better progressive enhancement? · Issue #6284 · w3c/csswg-drafts
Release v6.0.0-alpha.0 · styled-components/styled-components
GitHub - kevquirk/simple.css: Simple.css is a CSS template that allows you to make a good looking website really quickly.
Guess CSS! HTML & CSS puzzler game
GitHub - AntoineW/luge: Luge
GitHub - facebookincubator/infima: A UI framework that provides websites with the minimal CSS and JS needed to get started with building a modern responsive beautiful website
