Default styles for h1 elements are changing | MDN Blog
Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured
Thank you - styled-components
First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As I write this in 2025, styled-components as a project is in "maintenance mode". There are a number of reasons for this: The React core team has decided to defac
リンクの下線の視覚的ノイズを軽減する
“Designing dyslexia-friendly navigational components”によれば、text-decoration: underlineによるデフォルトの下線はアクセシブルではないと言う。理由としては大きく二つ。 下線がディセンダーと重なることで文字の判読性や可読性が損なわれる コンテンツの邪魔になって読み手の気を散らす これは特にディスレクシアなど、認知機能に困難があるユーザーへの影響が大きい。 加えて、デフォルトの下線は美観としても好ましくないという評価を受けることが多い。視覚的に煩雑な印象を与えるからという、上記と類似する理由によるものだろう。 件の記事では、そうした問題を踏まえた改善案が紹介されている。これを参考に、このサイトでは次のような実装を採用した。 html { /* 下線と文字の距離を離す */ text-underline-offset:
CSS における if と function の提案 | blog.jxck.io
Intro CSS に if() および @function が提案されている。 仕様がこれで確定したとは言い切れないため、背景および現状にフォーカスして解説する。 なお先に言っておくが、関数の再帰は初期仕様から外されているため、「CSS がプログラミング言語になった」という話ではない。 if() まず Dark/Light 2 つのモードをもつコンポーネントを考える。Old School な書き方だとこうなるだろう。 <style> .dark { color: #fff; background-color: #000; } .light { color: #000; background-color: #fff; } </style> <my-div class="dark">dark</my-div> <my-div class="light">light</my-div> この場合
ジャイアントパンダに注意 - Next.js のビルド改善 (株式会社GiXo様)
最近になって Frontend Ops の傭兵として活動を始めました。 Frontend Ops 実践のモデルケースとして、 株式会社GiXo様で Next.js 仕事に取り組ませいただきました。今回、その内容を公開する許可を頂けたので、事例として公開させていただきます。 依頼主 株式会社GiXo様 以下、敬称略 相談内容 フロントエンド関連のリポジトリで、Next.js のビルドが遅くなってしまった。 重いことに起因して Vercel CI で OOM で確率的に落ちるようになった。CIが信用できなくなり、とりあえず再ビルドするクセがついてしまって、生産性が落ちている。 モノレポ内にとくに重いアプリケーションが一つあり、これを調査・解決してほしい。 仮ゴール: VercelCI 上のビルド時間を半分OOM が発生しないようにしたい 調査フェーズ リポジトリの閲覧権を頂き、プロジェクト構成
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示するそのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
コードジャンプ可能な CSS Modules を実現する happy-css-modules の紹介 - mizdra's blog
弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必要になった背景、導入方法、そしてツールの技術的な仕組みについて紹介します。 CSS Modules の問題点と、typed-css-modules による解決 CSS Modules では、デフォルトでは存在しないクラス名を使用しても、(プロジェクトの設定次第ですが) TypeScript のコンパイルエラーが出ることはありません。 import styles from './Button.module.css'; function Button() { return ( <but
Attacking web without JS - CSS injection
When speaking of web security in front-end, XSS is the first thing that comes to mind. But, even without JavaScript, the attacker can still use other at…
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
Google Meet で自分のWebカメラの画像が反転しているのを正位置に戻す - magamingのブログ
Google Meet だと自分のWebカメラの映像が反転していまっていて困る。 何に困るかっていうと、最近背後に時計を置いてるんだけど、自分の画面だと反転していて何時かパット見わからない。 Zoom とかだと設定で変えられる機能があるみたいだけど、Meet は特になさそう。 開発者ツールで HTML を見てみると、なんと自分の映像を表示している video タグに -webkit-transform: scaleX(-1) が仕込まれていて、css で反転させていることがわかった。 ので Stylish で css を上書きして事なきを得た。 どうやら css で反転しているのは自分の動画だけなので、乱暴に video タグ全部上書きしている。 @-moz-document domain("meet.google.com") { video { -webkit-transform: sc
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions: When you run the demo, you'll see the <figcaption> immediately. Then, after a few seconds, this paragraph and subsequent page content shifts downwards to make room for the image. This makes the user experience massively frustrating, as content moves out from under the user's eyes/finger/poi
2022年のCSS | gihyo.jp
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
altにもスタイルを当てられる - hitode909の日記
altにスタイルを当てたいと思ったことがなかったので知らなかったけど、普通にスタイルをあてられるようだった。 色を変える フォントサイズを変える 画像のリンク切れなどでalt属性が目に見えていたら、画像が読めないことに対処しがちで、altの見た目をカスタマイズしよう、と思い当たったことがなかった。 骨折したときにギプスに落書きする、みたいな活動。
The State of CSS 2021
Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey resu
uBlock, I exfiltrate: exploiting ad blockers with CSS
uBlock, I exfiltrate: exploiting ad blockers with CSS Published: 06 December 2021 at 14:00 UTC Updated: 07 December 2021 at 12:15 UTC Ad blockers like uBlock Origin are extremely popular, and typically have access to every page a user visits. Behind the scenes, they're powered by community-provided filter lists - CSS selectors that dictate which elements to block. These lists are not entirely trus
The New CSS Reset
Skip to the content. The New CSS Reset This new CSS reset is using the new CSS features: The global CSS reset keywords, ‘unset’ and ‘revert’ keywords. The new property of ‘all’ which can reset all properties combined. The :where() pseudo-class to remove specificity. The :not() pseudo-class with multi arguments. What the-new-css-reset is resetting? This CSS reset is built from the understanding we
SVGフィルタで緊急事態宣言 - すずしめにっき
blog.utgw.net 私も緊急事態宣言してみました。文字のオタクサイドです。 フォント 元ネタのNHKのやつはたぶんニューロダンです。 lets.fontworks.co.jp これを使うとめっちゃそれっぽくなることは知られていますが、残念ながら私はLETSと契約していないので、Google Fontsで使えるNoto Sans JP Boldにします。 あと、なんとなくそれっぽくなりそうなので90%長体をかけました。 該当部分だけ抜き出すとこんなかんじです。Google Fontsはお手軽に使えて良いですね。 <head> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UnoCSS: The instant on-demand Atomic CSS engine
無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
Vivliostyle — 楽しく CSS 組版！
