CSSのCascadingに追加されようとしているLayerという概念 - araya's reservoir
2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ
Aligning a Button Label Vertically
Do you want to master CSS layouts? I'm building a new course. Learn more At some time in the past, you were given a design mockup to implement. The designer used a new cool font, and it looks perfect in the design. Once you import it and use it in CSS, you will notice additional spacing around the font. What is that? And why the designer did pick such a font in the first place? Well, this issue is
"CSS Module" をめぐる混乱
コミュニティベースの CSS Module https://github.com/css-modules/css-modules コレ自体は概念的なもの。 その実装 として Webpack の CSS Loader などがある。 なので、一般的に「CSS Module か Styled Component か」みたいな議論ででてくるものの場合、 Webpack の CSS Loader を入れるかやめるかみたいな文脈が多い。 State of CSS 2020 で出てくる CSS Module も、まだこっちを指してる。 https://2020.stateofcss.com/en-US/technologies/css-in-js/#css_modules Synthetic Module の CSS Module WebComponents の HTML Imports まで遡る ht
CSSを軽量化し、ページ表示速度を改善せよ！ レガシーWebフロントエンドのパフォーマンスチューニング
2018年の7月から実施されたGoogleの検索ロジックの変更（Google Speed Update）により、ページ表示速度がサイト検索順位に影響するようになりました。今回紹介する取り組みは、Google Speed Updateに備え、タウンワークにおいて、できる限りのパフォーマンス改善を行う目的で実施したものです。本稿には、煌びやかなWebの新技術の話は一切登場しません。むしろ、連綿と受け継がれてきた「秘伝のタレ」に立ち向かう泥臭い話です。この取り組みで行ったアプローチは、不要なものを削って速度改善を図るという技術的には非常にシンプルなものです。ただし、いくつかの制約条件によって難易度が上がっています。本稿では、実際の取り組み内容と結果、および今後についてお話しします。 はじめに リクルートテクノロジーズでソフトウェアエンジニアをしている加藤慶之です。 本稿では、リクルートジョブズが
prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features | blog.jxck.io
Intro macOS Mojave は OS レベルで Dark Mode に対応した。 しかし、Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。 Safari TP69 では、これにメディアクエリで対応するための prefers-color-scheme が実装された。 これを用いた DarkMode 対応と、本ブログの DarkMode 対応、および策定中の User Preference Media Features について解説する。 Update 画像の対応について追記した Code Block の対応について追記した 2019/1 に Chrome の Intents が出された。 Intent to Implement: Media Queries: prefers-color-scheme feature In
SUIT CSS: style tools for UI components
Introduction SUIT CSS is a reliable and testable styling methodology for component-based UI development. A collection of CSS packages and build tools are available as modules. SUIT CSS plays well with React, Ember, Angular, and other component-based approaches to UI development. Scope styles The SUIT CSS naming convention helps to scope component CSS and make your widgets render more predictably.
「端っこ」におけるスクロールの挙動を制御する overscroll-behavior プロパティ | ダーシマ・ヱンヂニヤリング
※この記事の内容は、まだブラウザに実装されていない内容を含みます。また、勧告前の仕様について言及しているため、最新の仕様では変更になっている場合があります。 要約 overscroll-behavior プロパティを使うと、スクロール境界（端っこ）におけるブラウザデフォルトの挙動を上書きすることができます。例えば、ブラウザが持っている「下方向に引っ張ってリロード」する機能や、スクロールが親要素に伝わる「スクロールチェーン」の挙動を無効化することができます。 はじめに 主にタッチデバイスにおいて、無効化したいのにできない、スワイプ操作やスクロールにまつわる困った挙動が３種類ありました。 「もうこれ以上スクロールができない」ことを表すインタラクション スクロールが親に伝播してしまう「スクロールチェーン」 左右へのスワイプで行う履歴の前後ナビゲーション 「もうこれ以上スクロールができない」ことを
こんなCSSからはそろそろ卒業しよう
社内向け勉強会で作ったスライド ※Bracketsの拡張機能「Shizimily Multiencoding for Brackets」は最新Bracketsにはいらないようです！
Inside a super fast CSS engine: Quantum CSS (aka Stylo) – Mozilla Hacks - the Web developer blog
You may have heard of Project Quantum… it’s a major rewrite of Firefox’s internals to make Firefox fast. We’re swapping in parts from our experimental browser, Servo, and making massive improvements to other parts of the engine. The project has been compared to replacing a jet engine while the jet is still in flight. We’re making the changes in place, component by component, so that you can see th
レンダリング ツリーの構築、レイアウト、ペイント | Articles | web.dev
レンダリング ツリーの構築、レイアウト、ペイント コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2014 年 3 月 31 日 CSSOM ツリーと DOM ツリーはレンダリング ツリーに結合され、各可視要素のレイアウトを計算するために使用されます。また、画面にピクセルをレンダリングするペイント プロセスの入力としても使用されます。最適なレンダリング パフォーマンスを実現するには、これらの各ステップを最適化することが重要です。 オブジェクト モデルの構築に関する前のセクションでは、HTML と CSS の入力に基づいて DOM ツリーと CSSOM ツリーを構築しました。ただし、これらはどちらもドキュメントの異なる側面をキャプチャする独立したオブジェクトです。1 つはコンテンツを記述し、もう 1 つはドキュメントに適用する必要があるスタイルルー
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
CSSのスペシャリストも、サーバーサイドを知れば視野が広がる！ Incrementsが目指すT型エンジニアの育成 - エンジニアHub｜Webエンジニアのキャリアを考える！
CSSのスペシャリストも、サーバーサイドを知れば視野が広がる！ Incrementsが目指すT型エンジニアの育成 「若手エンジニア、どんな活躍してますか？」第6回は、QiitaやQiita:Teamで知られるIncrements編。I型のスキルセットだった若手エンジニアがT型になるようCTOが取り組んだこととは？ 詳しい話を伺いました。 若手エンジニアのための情報メディア「エンジニアHub」。連載「若手エンジニア、どんな活躍してますか？」第6回は、QiitaやQiita:Teamで知られるIncrements編です。 エンジニアの森下雅章（もりした・まさあき）さんは、Incrementsに昨年（2016年）8月に入社したばかり。学生時代からCSS（Cascading Style Sheets）関連ツールを開発し、前職ではフロントエンドエンジニアとして腕を振るってきました。Increment
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー
CSS Deep-Dive - matrix3d() for a frame-perfect custom scrollbar | CSS and UI | Chrome for Developers
Custom scrollbars are extremely rare and that’s mostly due to the fact that scrollbars are one of the remaining bits on the web that are pretty much unstylable (I’m looking at you, date picker). You can use JavaScript to build your own, but that’s expensive, low fidelity and can feel laggy. In this article, we will leverage some unconventional CSS matrices to build a custom scroller that doesn’t r
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
日本語対応！CSS Flexboxのチートシートを作ったので配布しますFlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。 Web クリエイターボックスでは以前から Flexbox の使い方について紹介してきたのですが、最近 Flexbox が浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ 動画で学ぶ CSS Flexbox この記事は YouTube 動画でも解説しています。動画派の方
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Headless UI
styled-component + CSS Grid - Speaker Deck
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
