CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。 Limit the reach of your selectors with the CSS @scope at-rule by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 CSSのセレクタを記述するきめ細やかな技術 CSSの@scopeとは :scope疑似クラスとは @scope
レスポンシブデザインで Tailwind CSS と CSS custom properties を併用する体験が良過ぎる
Tailwind CSS での開発体験が個人的に最高すぎて、最近はどんなWebサイトの実装でも利用しています。 CSS custom properties を併用することもあり、そのときに嬉しいことを紹介します。 Next.js を使っている前提でコード・ファイル名を例示しますが、他でも扱えると思います。 CSS custom properties 併用したい場面 スマートフォンでは、コンテンツを端から 16px の位置に置く パソコンでは、コンテンツ幅を 960px にし中央寄せにする こんなデザイン仕様、レスポンシブデザインだとよく出きます。 tailwind.config.js でテーマを拡張して実装すると以下のようになります。 import type { Config } from 'tailwindcss'; export default { theme: { extend: {
フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
font-familyについて本気で考えてみた - Qiita
今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザーの環境を考えなければならない節目の時です。 そこでいつもコピペで済ましているfont-familyについて1から考え直してみます。 全部読もうとしている人はスクロールバーを見てから考えてください。 結果 コピペユーザーのために先に結果を記載します。 ブログ等に転載する場合はこのページのURLぐらい貼ってください。 @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Original Yu Gothic"; src: local("Y
CSSを非同期ロードする最も簡単な方法 - Qiita
CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco
ブラウザはCSSのセレクタを右から読む、ほんまか？ - Qiita
先日、 ブラウザ君「ワイはCSSのセレクタを右から読むんや」 という記事を読みまして、ちょっと気になったので後で確かめようと思っていたのですが、なんとなくそのままになってしまいやや旬を逃した感がありつつ、ツッコミを入れてみようと思います。 なお『ワイ「ほげほげ」』みたいな形式は使いません1。恥ずかしいので。 私は仕事でChromiumのソースコードをよく読んでいるので、ChromiumのソースコードからCSSの処理を見つけて、それを基準にして解説しようと思います2。そのため、他のブラウザのレンダリングエンジンと異なる最適化が施されている可能性があります。また、現在のソースコードがそうでも、将来的に別の方法に変更される可能性もあります。あくまで、ブラウザの処理の一例であることをご了承ください。 ChromiumはC++で開発されていて、私もC++畑の猫ですが、今回の記事は随所にリンクを挿入し
ブラウザ君「ワイはCSSのセレクタを右から読むんや」 - Qiita
ある日のやめ太郎一家 娘（3歳）「パパ、レンダリング最適化されたCSS書いてる？」 ワイ「なんやレンダリングって」 娘「ブラウザがWebサイトを描画することだよ」 ワイ「ああ、そのレンダリングか」 ワイ「よう知っとるわ」 よめ太郎「（CSS関係で他にどんなレンダリングがあんねん）」 よめ太郎「（また知ったかぶりしとるわ）」 ワイ「ワイはいつも描画速度を意識してCSSセレクタを書いてるで？」 ワイ「例えばWebサイトのヘッダ部分にある、サイト名のところにスタイルをあてる場合で・・・」 ワイ「↑こんな風にセレクタを書いてやるんや」 ワイ「そしたらブラウザ君は」 ブラウザ君「このページの中で、header要素は・・・お、この1つだけやな」 ブラウザ君「ほんで、その中のdiv要素は・・・この1つだけやな」 ブラウザ君「ほんで、更にその中のa要素は・・・この1個だけやな！」 ブラウザ君「特定しやすい
特定の単語だけ途中で改行させないHTML/CSS（「あなたとJAVA, 今すぐダウンロー(改行)ド」問題） - Qiita
特定の単語だけ途中で改行させないHTML/CSS（「あなたとJAVA, 今すぐダウンロー(改行)ド」問題）HTMLCSS トップページに掲載されるキャッチフレーズなど、言葉の途中で改行されると急激にダサくなってしまう文があると思います。 英語を始めとするスペースで単語が区切られる言語であればブラウザが良い感じに調整してくれるのですが、日本語を含むCJKVのような言語では単語の途中であっても無慈悲に改行されてしまいます。 要するにこれを避けたい 途中で改行されるものとして最も有名なのがこれです。 （https://java.com/ja/ より） この「今すぐダウンロー（改行）ド」は何の変哲もないHTMLで再現できます。
Only CSS: Trick Art
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
“Responsive Line Breaks,” an article by Dan Mall
You’re on an old version of this site. Please visit danmall.me for the latest. Responsive Line Breaks I create a lot of mobile-first, responsive designs. It’s the way SuperFriendly builds websites, as many suggest (unless, of course, there’s a good reason not to do so). Perhaps because responsive design is still relatively new or perhaps because of my history and affinity towards fixed-width pixel
【Sass】Sassでレスポンシブ！メディアクエリを便利に書こう。 | バシャログ。
気が付いたら8月突入してて茫然としたhakoishiです。 しかももう1/3過ぎてるとか冗談はおよし。 さて、今回はSassでメディアクエリを便利に管理できる書き方の一例をば。 まとめて書いて、コンパイルの際にブレイクポイント毎に分散させます。 最近、レスポンシブ対応でコーディングをする機会があったのですが、ブレイクポイント毎にそれぞれセレクタを書いていったら管理しきれなくなってしまいました。 まるで統一感のないソースに…！ そこで考えたのが、同じセレクタはまとめて記述し、その内部でメディアクエリごとの分岐も書く方法です。 更に、メディアクエリ毎にまとめて吐き出されるようにしました。 一度に視界に入る範囲であれば、統一感を保った記述もしやすいかと。 scssファイルの構成と記述内容 メディアクエリ分岐などの枠をstyles.scssに、スタイルは_media-query.scssに記述しま
Single-direction margin declarations – CSS Wizardry
12 June, 2012 Single-direction margin declarations Written by Harry Roberts on CSS Wizardry. Table of Contents Defining vertical rhythm Confidence in portability Less to think about Exceptions Breaking the rule Final word This morning I awoke to find Smashing Magazine had retweeted a tweet I made two months ago about how you should always try and apply margins in one direction only. This, like mos
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
あなたはPCスマホ使いですね？ 上の文字はスマホかPCかによって変わります ..
http://www.okuni.me/entry/hatenablog-hard-to-read-cause
Stretchy Pants — A Resizable Concept
Time Series 2: Typographic Clock
Stylish - Custom themes for any website
CSS for Babies: A Critical Analysis | CSS-Tricks