CSSの疑似クラスと疑似要素、:と::の違い
CSSで疑似クラス、または疑似要素を使用する時に、:と::のどっちだっけ？ と迷ったことはありませんか？ :beforeと::beforeのどっちだっけ？ :notと::notのどっち？ :と::のどっちが疑似クラスだっけ？ ※CSS3では::beforeですが、CSS2では:beforeでした。 たまに迷ってしまうことがある人に、CSSの疑似クラスと疑似要素、:と::の違いについて紹介します。 What's the difference between : and :: in CSS? by Salma Alam-Naylor(@whitep4nth3r) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの「疑似」とはどういう意味か 疑似クラスとは 疑似要素とは はじめに 「CSS :と::の違い」をGoogl
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
CSSにそのうち導入されそうな@scopeとその関連概念
気がつけばCSSの@layerが全てのモダンブラウザに実装完了している今日この頃、みなさまはいかがお過ごしでしょうか。 CSSでは、@layerに次ぐ新機能として @scope が検討されています。最近これについて勉強したのですが、これを取り扱う日本語記事が見当たらなかったので今回ご紹介します。 この記事では、CSS Cascading and Inheritance Level 6のFirst Public Working Draftの内容を紹介します[1]。これは去年12月のバージョンで、より新しいEditor's Draftとして今年4月のものがありますが、特に大きな変更はありませんでしたので、この記事の内容が執筆時点の最新情報だと思って差し支えありません。
A Complete Guide to Dark Mode on the Web | CSS-Tricks
Dark mode has gained a lot of traction recently. Like Apple, for instance, has added dark mode to its iOS and MacOS operating systems. Windows and Google have done the same. DuckDuckGo’s light and dark themes Let’s get into dark mode in the context of websites. We’ll delve into different options and approaches to implementing a dark mode design and the technical considerations they entail. We’ll a
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
Box Model | web.dev
Box Model Stay organized with collections Save and categorize content based on your preferences. p { width: 100px; height: 50px; padding: 20px; border: 1px solid; } The content ends up 142px wide, instead of the 100px you specified, and it breaks out of your element. Why is that? The box model is a core foundation of CSS. Understanding how the box model works, how it's affected by other aspects of
Defensive CSS
👋 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. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or
The State of CSS 2021
木工職人は数年ごとに、ノコギリのよりよい使い方を学ばなければならないのでしょうか？画家は「まだ油絵を描きつづけている」と、負い目に感じたりはするのでしょうか？それとも、絶え間ない変化を経験し続けなければならないのは、フロントエンド開発者だけなのでしょうか？ コンテナークエリーなどが目の前に来るくらい、物事の進みがますます速くなっています。その流れに飲まれないよう、このアンケート結果にパワーアップを施しました！ 今回から、2つのデータを組み合わせることができるようになりました。たとえば、年収水準と経験年数や、ジェンダーと居住国といった感じです。このアンケート結果でいくつかの組み合わせを見られますが、APIを使ったり、データをダウンロードして、さらにデータを掘り下げてみてください。いいビジュアライズをしたら、ぜひ教えてください。 では、今年のCSSがどうだったかを見てみましょう！ お知らせ：時
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
Grid by Example - Usage examples of CSS Grid Layout
The following examples include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. Unless otherwise noted these examples work in any browser supporting the up to date Grid Specification. They will not work in IE10 or 11. For page layout examples see a collection of page l
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
Bootstrap 4 Upgrade - Convert Bootstrap 3 to Bootstrap 4
×Head's up! This service is based on Bootstrap 4.1.0. Also, try our Bootstrap 4 custom build tool. This conversion service is intended to help you upgrade from Bootstrap 3 to Bootstrap 4. The original 2.x to 3 upgrade tool is here. (The Bootstrap 4 to Bootstrap 5 converter is coming soon) Given valid Bootstrap 3 HTML markup, this upgrade tool replaces the Bootstrap 3.x CSS classes with Bootstrap 4
[CSS ] Flexboxの折り返した要素にだけマージンをつけたい
[CSS] Flexboxの折り返した要素にだけマージンをつけたい 公開日:2018/09/02 更新日:2020/11/08 Flexboxで要素を並べるとき、ウィンドウの幅によって要素をいくつ並べるか切り替えたいことがあります。 親要素にflex-wrapでwrapを指定。各メディアクエリで要素の幅を変えてやれば、とりあえず折り返すようにはなります。 ここで、要素と要素の間にマージンを取ろうと単純にmarginをセットすると、一行目や一列目にも不要な余白がついてしまいます。 かといって、メディアクエリでいくつ並ぶか計算して必要な要素だけマージンを指定するのも面倒です。 こんなときにどうスタイルを指定したらいいか考えてみました。 サンプルコード html <div class="flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</d
![[CSS ] Flexboxの折り返した要素にだけマージンをつけたい](https://cdn-ak-scissors.b.st-hatena.com/image/square/ff0371f1e2c2d2f4819a631289fdd24d5b5ae810/height=288;version=1;width=512/https%3A%2F%2Fmigi.me%2Fuploads%2F2018%2F09%2Fflexbox-margin-wrap-001.jpg)
The new responsive: Web design in a component-driven world | Articles | web.dev
The new responsive: Web design in a component-driven world Stay organized with collections Save and categorize content based on your preferences. Responsive Design Today Today, when using the term: "responsive design", you are most likely thinking about using media queries to change layout when resizing a design from mobile size, to tablet size, through to desktop size. But soon, this perception o
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
*2021 6/11追記 『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebook CSS-in-JS Solution Stylex Introduced at React Finland 2021
Solution analysis for Polaris Foundations
https://css-tricks.com/a-thorough-analysis-of-css-in-js/?s=09
No-Class CSS フレームワークをいろいろ比較するサイトを作った