Framework for converting Left-To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL)
RTLCSS
Framework for converting Left-To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL)
A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors — Smashing Magazine
The CSS Working Group Editor’s Draft for Selectors Level 4 includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today! Pseudo-class selectors are the ones that begin with the colon character “:” and match based on a state
Chapter 8: CSS | CSS-Tricks
In June of 2006, web developers and designers from around the world came to London for the second annual @media conference. The first had been a huge success, and @media 2006 had even more promise. Its speaker lineup was pulled from some of the most exciting and energetic voices in the web design and browser community. Chris Wilson was there to announce the first major release to Microsoft’s Inter
The CSS aspect-ratio property | Articles | web.dev
Aspect ratio is most commonly expressed as two integers and a colon in the dimensions of: width:height, or x:y. The most common aspect ratios for photography are 4:3 and 3:2, while video, and more recent consumer cameras, tend to have a 16:9 aspect ratio. Two images with the same aspect ratio. One is 634 x 951px while the other is 200 x 300px. Both have a 2:3 aspect ratio. With the advent of respo
Bootstrap 5
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Bootstrap 5 has officially landed! After three alphas, three betas, and several months of hard work, we’re shipping the first stable release of our new major version. It’s been a wild ride made possible by our maintainers and the amazing community that uses and contrib
Fower
Atomic PropsWrite styles with Atomic Props, rapid to develop complicated UI by composing Atomic Props. Scoped styleBorned with scoped styles, So don't worry any conflicts due to the globalnamespace. Type SafePerfect support for TypeScript, which bring Type definition,IntelliSense,Self documentation.
Overflow Issues In CSS — Smashing Magazine
You may have come across horizontal scrollbar issues, especially on mobile, if you’re a front-end developer. Because there are many causes of scrollbar problems, there is no straightforward solution. Some issues can be fixed quickly, and some need a little debugging skill. In this article, Ahmad Shadeed will explore the causes of overflow issues and how to solve them. We will also explore how mode
Exploring color-contrast() for the First Time | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I saw in the release notes for Safari Technical Preview 122 that it has support for a color-contrast() function in CSS. Safari is first out of the gate here. As far as I know, no other browser supports this yet and I have no idea when stable Safari will ship it, or if any other browser ever will. B
CSS の Container Queries おためし - 見返すかもしれないメモ
CSS に、コンテナクエリという機能があるらしい。 メディアクエリでは画面全体の大きさに応じて要素のスタイルを変えることができたけど、コンテナクエリを使うと当該要素の親の大きさに応じてスタイルを変えられる。 /* メディアクエリの例 */ /* 画面幅が 400px 以下だったら、div を赤くする */ @media screen and (max-width: 400px) { div { background-color: red; } } /* コンテナクエリの例 */ /* div の親要素の幅が 400px 以下だったら、div を赤くする */ @container (max-width: 400px) { div { background-color: red; } } その機能が Google Chrome Canary で使えるようにされたと聞いたので、使ってみた。 こ
Real-world CSS vs. CSS-in-JS performance comparison
CSS-in-JS has taken a solid place in front-end tooling, and it seems this trend will continue in the near future. Especially in the React world. For example, out of 11492 people who participate in State of CSS survey in 2020 only 14.3% didn’t hear of Styled Components (a dominant CSS-in-JS library). And more than 40% of participants have used the library. I wanted to see an in-depth performance co
読書アシストの実装方法について考えてみる
はじめに まず、読書アシストについては、こちらを参照してください。 この読書アシストの「4. 冒頭文字を階段状に字下げする表示方式」をどのように実装するのかについて考えてみました。 画像は読書アシストより レギュレーション こちらのサンプルを確認するとわかるように、 段落 (HTML でいうと p タグ) ごとに字下げはクリアされ 1行ずつ字下げが増えていき 7行ぐらい (作品によっては9行のものもある) で字下げが2文字ぐらいに戻り 以降5行ごとぐらいに字下げが2文字ぐらいに戻る。 図にすると以下のような感じ。 実装 現時点で以下の値が設定できると良さそうな気がします。 最大字下げ 最初の字下げ行数 続きの字下げ行数 これらを CSS カスタムプロパティとして以下のように設定しておきます。 :root { --assist-indent-max: 7em; /* 最大字下げ */ --a
:where() has a cool specificity trick, too. | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. There is a lot of hype on the :is() pseudo-selector lately, probably because now that Safari 14 has it, it’s supported across all the major browsers. You’ve got Miriam tweeting about it, Kevin Powell doing a video, Šime getting it into the Web Platform News, and Robin mentioning it. Bramus really p
GitHub - vanilla-extract-css/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript
Zero-runtime Stylesheets-in-TypeScript. Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time. Basically, it’s “CSS Modules-in-TypeScript” but with scoped CSS Variables + heaps more. 🔥 All styles generated at build time — just like Sass, Less, etc. ✨ Minimal abstraction over standard CSS. 🦄 Works with
CSS Auditing Tools — Smashing Magazine
About The AuthorJuggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of … More about Iris ↬ Ideally, a CSS auditing tool would provide some insights about how heavily CSS implact rendering performance, and which operations lead to expensive layout recalculations. It could also highlight what propertie
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jsxtools/cqfill: Polyfill for CSS Container Queries
Windi CSS
Style Check by Austin Gil
callstack/linaria: Zero-runtime CSS in JS library
Charts.css
GitHub - elchininet/isometric-css: Isometric-CSS is a lightweight JavaScript library to build isometric projections through declarative HTML attributes.
