Prioritize Critical CSS
Configuration The 'Prioritize Critical CSS' filter is enabled by specifying: Apache:ModPagespeedEnableFilters prioritize_critical_css Nginx:pagespeed EnableFilters prioritize_critical_css; in the configuration file. Objective This rewriter improves page render times by identifying CSS rules needed to render the page, inlining those critical rules and deferring the load of the full CSS resources. D
新版: やばい臭いのするCSSコード（翻訳）｜TechRacho by BPS株式会社
今をさかのぼること2012年に、Code Smells in CSSというタイトルでCSSに潜むアンチパターンについての記事を公開しました。その後4年が経過し、記事の内容についての考えは今も変わっていませんが、さらに追加すべきリストが増えました。繰り返しますが、これらはあくまでコードから立ち上るやばい臭いという兆候であり、これがあるからといって必ずしも絶対的な悪手ではないことにご注意ください。ユースケースによっては全面的に容認できることもあるかもしれません。それでもやばい臭いが残ることに変わりはありませんが。 本題に入る前に、「コードの臭い（訳注: リンク先は日本語版です）」とは何かをおさらいしておきましょう。以下はWikipediaからの引用です（訳注: 強調は原著者）。 コードの臭い（または悪臭）とは、コンピュータプログラミングにおいてソースコードにより深刻な問題が潜んでいる可能性をう
CSSのロードタイミングの不備が引き起こす、FOUCとは？ - ふろしき Blog
FOUC(Flash of Unstyled Content)とは、Webページへアクセスした直後、CSSによるデザインが有効でないページが一瞬だけ表示される現象のことです。 まず、下の例をご覧下さい。 <!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>Example</title> <link rel="stylesheet" href="hoge.css" type="text/css" /> </head> <body> ・・・ </body> </html> この例では、CSSの外部ファイルをhead要素内から呼び出しています。この方法はもうずっと昔から守られている伝統で、誰しもが無意識のうちにやっていることでしょう。 しかしCSSの外部ファイル参照は、head要素の外でやっても問題なく動作します。つまり、以下
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
CSSセレクタのパフォーマンスへの影響 - MOL
ASCII.jp：30分でできる！Webサイトを高速化する6大原則 高速化する6大原則として『4.CSS セレクターは短く最適化せよ！』とこの記事では挙げられているのですが、原則というのはちょっと言い過ぎではないかと。少なくとも『3.HTTPリクエストは最小にせよ！』などと同列に考えるのは避けた方が良いかもしれません。 というのも、ハイパフォーマンスWebサイトの著者であるSteve Soudersはこんなことを言っています。 CSSセレクタを最適化するために時間を費やすのは価値のあることだとは思わない。もし、明日起きて世界中のサイトのCSSセレクタが奇跡的に最適化されていたのなら、私は遠くに行ってこう叫びたい。『誰も気づいてないですやん！！』 High Performance Web Sites :: Performance Impact of CSS Selectors Steve S
カーゴ・カルトCSS
CSSを書いたり管理したりするにはなんらかの方法論があった方が良い、と広く考えられている。しかし実際に取り入れられている手法の中には、セマンティクス上の品質や、長期にわたるメンテナンス性に悪影響を与えるものもある。ここでは、CSSの「フレームワーク方法論」として提唱されているテクニックの問題点や、その問題を僕たちウェブ・ディベロッパーがどうすれば解決できるかについて論じてみようと思う。 現在、CSS開発におけるフレームワーク方法論として、BEMなど類似のテクニックがいくつかあるが、もっとも有名なのはOOCSSだろう。これらの方法論はCSSにオブジェクト指向プログラミングの原則を適用しようと試みる。しかしながら、両者の間にはそもそも宣言型スタイル言語とオブジェクト指向ソフトウェア設計原則というコンセプト上の不一致がある。その結果、経験の浅いディベロッパーが気づきにくいような複雑な問題を持ち込
CSS and the First Meaningful Paint - CSS Conf EU, May 2017
To render a webpage browsers needs to go through the complex dance of networking, parsing and painting before any content can be displayed to your user. Over the years, we've developed mechanisms and hacks to aid the browser at each stage of this process, but these have always come at some cost or trade-off. How can we utilize modern web platform features to load our CSS as fast as possible? Shoul
聖杯レイアウト — Solved by Flexbox — クリーンでハックのない CSS
聖杯レイアウト（Holy Grail Layout） は、長い間いろいろな解法が提示されてきた、古典的なCSSの問題です。もし聖杯レイアウトの歴史についてご存知でなければ、このA List Apartの記事はとても良い要約であり、よく知られた解法についてのリンクとなっています。 聖杯レイアウトの本質は、ヘッダーとフッター、3つのカラムのあるページです。中央のカラムはメインコンテンツを含み、左右のカラムは広告やナビゲーションのような補助的なコンテンツを含みます。 この問題を解くためのほとんどのCSSの解法は下記のゴールを目指すものです。 伸縮する中央のコンテナと、固定幅のサイドバーを持つこと。中央のカラム（メインコンテンツ）はHTMLソースの最初に登場すること。すべてのカラムは、どのカラムが一番高いかに関係なく、同じ高さであること。最小限のマークアップしか必要にならないこと。コンテンツの量が
属性の併記時におけるCSSのnth-of-typeの挙動 - テクデップ（Techdep）
CSSのセレクタとしてnth-of-typeがある。指定した番目の要素に対してCSSを適用できる便利なものである。別段難しいセレクタではない様に見えるが、属性が併記されたときに案外勘違いしやすい挙動になって居るので、今回はそれについて書きたい。 nth-of-typeの挙動の確認 最初にCSSの入門サイトでよく見られる様な記述でnth-of-typeの挙動を確認する。 <style type="text/css"> li:nth-of-type(2) { color : red; } </style> <ul> <li>ネオサイタマ炎上</p> <li>キルゾーン・スモトリ</p> <li>キョート殺伐都市</p> </ul> これをブラウザで表示すると下記の様になる。予想通り「キルゾーン・スモトリ」の文字が赤くなった。 属性が併記されたとき それでは次の場合はどうだろう。先程と違ってクラ
Chromeでも読みやすい游ゴシックを指定する方法 - Qiita
Windows8.1から搭載された「游ゴシック」ですが、ChromeとOperaで薄く掠れて見難くなってしまいます。 一般的にはbodyにfont-weight: 500;を与えて回避している方が多いですが、フレームワークなどを使用した場合、font-weight100～400を指定しているコンポーネントの数だけfont-weight: 500;と指定しなければならなく、あまり現実的ではありません。 「游ゴシックについて」と「ベストなfont-family」がごちゃ混ぜになって記事が見難くなってしまいました。より詳細に書き込んだため記事を分割しました。 ストックされているかたや、ブックマークされている方にはご迷惑おかけします。 この記事はタイトルの通り游ゴシックのみを扱います。 当記事を踏まえたゴシック体のfont-familyの指定は「2020年まで使えるはずだったfont-family
Inclusive Technology Consulting - Bocoup
Look, I like good typography as much as the next person—maybe even a little more. When a CSS property came along with promises to doctor all my type with ligatures and carefully calculated kerning—not some half-assed tracking, but real kerning—I jumped at it. I put text-rendering: optimizeLegibility on headings, body copy, navigation links; I slapped it on images just in case a ligature might appe
Please Stop "Fixing" Font Smoothing
I wrote two posts on the topic of WebKit font smoothing before, but unfortunately the situation has grown worse since then. In allowing the designer to pick their own font smoothing mode with the -webkit-font-smoothing CSS property, WebKit developers have opened up an opportunity for typographic abuse, namely, the disabling of subpixel font rendering. As I mentioned before, WebKit gives designers
flexboxの孫要素にheight:100%が効かない理由はなぜですか
html,body { height: 100%; margin: 0; } .flex { display: flex; height: 100%; } .flex-child { border: solid 1px gray; background: blue; } .flex-grandchildren { background: red; height: 100%; } <div class="flex" > <div class="flex-child"> <div class="flex-grandchildren"> height:100%が効かない </div> </div> <div class="flex-child"> <div class="flex-grandchildren"> height:100%が効かない </div> </div> </div> flex
Is there a "previous sibling" selector?
2024 Developer survey is here and we would like to hear from you! Take the 2024 Developer Survey
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Improve Website Page Load Performance With Critical CSS
Dynamically Inlining Critical CSS with Server-side JavaScript | Lullabot
How to justify a single flexbox item (override justify-content)
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
Primer
Can I merge a font-family in CSS to have more font varians via @font-face?