[B! css] igrepのブックマーク

AI CSS Animations

Your animation will appear here 🎬 No response available, prompt an animation above.

igrep 2024/06/19

リンク

不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園

CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。﹁〜になります。﹂が﹁〜になり〼。﹂になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu

igrep 2024/04/17

リンク

リンクの入れ子は subgrid が最適解かもしれない

はじめにリンクの入れ子とは何かというと、以下のようなデザインです。カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。しかし、以下のようにマークアップすることはできません。 <a href="https://example.com/posts/hello-world/"> <h2>Hello, World!</h2> <p>...</p> <a href="https://example.com/tag/hello/">#hello</a> <a href="https://example.com/tag/world/">#world</a> </a> HTML のルール的に <a> の入れ子はダメだからです。 Subgrid を使った方法 Subgrid がまだない時代からいろ

igrep 2024/03/28

html
css

リンク

Bouncy Ball - Compare Web Animation Techniques

igrep 2024/03/07

リンク

Vivliostyleでなにができるの？ | gihyo.jp

Vivliostyle︵ビブリオスタイル︶はCSS組版を実現するオープンソースのライブラリ／アプリケーション群です。これから始まるこの連載は、そんなVivliostyleの魅力や可能性にさまざまな方向から迫ってみようという試み。まず第1回としてCSS組版とはなにか、そしてVivliostyleでどんなことが、どのようにしてできるのかをご紹介します。 CSS組版ってなに？そもそも組版とはなんでしょう。一言でいえば文字・図版・写真などをページ上に配置することです。この記事では、とりわけCSSやHTMLといったWeb技術をつかうCSS組版を取り上げます。その最大の特徴はページ区切り︵pagination⁠︶⁠。ブラウザーではコンテンツをスクロールして読み進みますが、CSS組版ではページをめくることで読み進みます。結果として、CSS組版は印刷用データ︵PDF︶を作成する方法でもあります。現在CS

igrep 2024/02/07

リンク

<button>とかのスタイルを消して書き直すときに考えることの備忘録

all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポーネントライブラリの使用が可能であれば、それが最も堅牢な選択肢でしょう。) 参考各ブラウザのスタイルシート HTMLのスタイルシート UAスタイルの中には、CSSのカスケードルールの範疇で実装されているものもあれば、レンダリングエンジンの特別処理として書かれていて作者スタイルシートでの上書きが不可能なものもあります。これはブラウザ実装により異なります。スコープ UIコンポーネントを作るような場面を想定しています。したがって、要素名自体は固定として、その中で見落としがち

igrep 2024/01/02

リンク

Firefox 121 がリリースされて :has() が使えるようになりました。そして Intl.Segmenter は Firefox 123 で使えるようになる予定です。 - Qiita

Firefox 121 がリリースされて :has() が使えるようになりました。そして Intl.Segmenter は Firefox 123 で使えるようになる予定です。CSS JavaScriptFirefoxMDN はじめにこの記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。こんにちは。debiru です。﹁Firefox は利用者数が少ないので対応ブラウザから外します﹂とか言っているサービスは Web 標準を冒涜しているので滅んでどうぞ。今日は記念すべき Firefox 121 リリース日なので、改めて Firefox 121 でできるようになったことをお伝えするとともに、Firefox 122 あるいは 123 でサポートされる重要な機能についてお話したいと思います。 Firefox 121 がリリースされたよ Firefox

igrep 2023/12/20

リンク

2023年12月19日からFirefoxでも:has()が使えます - Qiita

はじめにこの記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。こんにちは。debiru です。HTML との最初の触れ合いは Windows95を使って Yahoo! ジオシティーズの Hollywood スペースに Web サイトを開設した頃です。ええと、今日は Safari (+ iOS Safari) では 2022 年3月に、Opera, Edge, Chrome では 2022 年9月にサポートされ、もちろん Vivaldi でも使える :has() 疑似クラスが Firefox で長年︵長年？︶サポートされなくてもやもやしていた皆さんに朗報です。 2023 年12月19日リリース予定の Firefox 121 で :has() がサポートされるというお話をしに来ました。みんな大好き :has() 疑似クラス

igrep 2023/12/04

Firefox
CSS

リンク

CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする１概要 | フロントエンドBlog | ミツエーリンクス

Interop 2023の重点分野の中からWebページの表示性能に関わるCSS Containmentをご紹介します。 CSS Containmentにはcontainプロパティとcontent-visibilityプロパティが定義されており、コンテンツの一部を独立したサブツリーとしてブラウザに認識させる﹁封じ込め﹂に関する指定ができます。﹁封じ込め﹂を行うと、ブラウザはレンダリング処理の一部を省略したり、必要なタイミングでレンダリングするようになります。結果、Webページのレンダリングパフォーマン向上につながります。レンダリングの基本的なフロー CSS Containmentの理解を深めるためにレンダリングについて確認します。以下のフローはBlinkのレンダリングフローを簡易的にまとめたものです。 Parsing HTMLドキュメントを解析して、DOM︵Document Object

igrep 2023/12/01

リンク

:user-valid & :user-invalid擬似クラスが来た！ - What's new in Browsers!

What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。今回はChrome 119の更新内容から気になるトピックとして、:user-valid擬似クラスと:user-invalid擬似クラスを紹介します。ユーザーの操作後に検証が行えるようになった :user-validと:user-invalidはどちらもフォームなどの入力要素の検証の状態に対してスタイルの指定などが行える疑似クラスになります。検証の状態とは、例えば<input type="em ail" required />な要素では入力されていない場合やem ailとして許容されない文字列が入力がされている場合はinvalidな状態になり、em ailとして許容される文字列が入力されている場合にはvalidな状態となります。 :validと

igrep 2023/11/08

":validと:invalidが入力要素の初期状態に対して検証を行うのに対して、:user-validと:user-invalidは入力に対してユーザーの操作が行われたあとに検証を行います。"

chrome
css

リンク

outlineプロパティで作った枠線は角丸にすることができない - dskd

公開日2015-11-30タグAdvent CalendarCSS追記︵2021 年10月5日、2023 年1月3日、2023 年3月28日︶最近のアップデートでモダンブラウザ全てで﹁outline プロパティで作った枠線も角丸にできる﹂ようになった。 Mozilla Firefox v88︵2021 年4月19日リリース︶ Google Chrome v94︵2021 年9月21日リリース | commit︶ Microsoft Edge v94︵2021 年9月21日リリース︶ Safari v16.4︵2023 年3月27日リリース︶なお、IE11 は対応しないまま役目を終えている。時間がかかったが Safari が対応したのはめでたい。これで outline を丸めるために box-shadow で代用するテクニックはも

igrep 2023/10/27

css
ie

リンク

style-dictionary を使ってフロントエンドで利用しやすいデザイントークンを生成する

tl;dr このレポジトリから .style-dictionary の中身を持ってきて npm run build を実行してください yaml で書けて、 JSDoc がついた branded-type なデザイントークンがコード生成されますデザイントークンとはデザインシステムを構成する要素のひとつで、 UI における見た目の各属性値を共通化するためにトークンとして定義したものです。コンポーネントに適用されたカラーコードや余白、フォントサイズなどCSS のスタイルの値などが具体的なデザイントークンですデザインシステムの中でも、デザイントークンはハードルが低く（値の一覧を棚卸してトークンにするだけ）、また導入した場合の実効性が高いため（実装者、デザイン共に値を少なく管理しやすくしたいという要望がある）、とりあえず導入してみるだけでも効果がありますデザインシステムに

igrep 2023/10/25

CSS

リンク

Style Dictionary - Style once, use everywhere. A build system for creating cross-platform styles.

Style once, use everywhere. A build system for creating cross-platform styles.

igrep 2023/10/25

css

リンク

スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger

スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。参考: Scroll-Driven Animations Debugger by Bramus! 記事の掲載にあたり、元サイト様にライセンスを得ています。まずは、さっそく機能拡張のインストールから。下記のページにChromeでアクセスし、﹁Chromeに追加﹂をクリックするだけです。起動方法や使い方は後述します。 Scroll-Driven Animations Debugger -Chrome ウェブストアこの機能

igrep 2023/09/27

css
chrome

リンク

CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する

2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列︵グリッド︶を入れ子にして、親行列の行や列に子行列を整列させることが可能です。この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め複雑な行列の入れ子と、subgrid

igrep 2023/09/13

リンク

【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita

はじめに最近のCSSのアップデートは目覚ましいものがありますが、みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()でネイピア数eや円周率 πなどが使えるようになったり、フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le

igrep 2023/07/20

css

リンク

CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた

私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていた CSS 開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State of CSS 2022 でも満足度が高く、先日は Next.js の appDir でも正式サポートされました。本記事では、CSS Modules から vanilla-extract に移行した経緯と、そのメリットについて紹介します。 CSS Modules で限界を感じていた CSS Modules を使っていた理由はいくつかありますが、主に次のようなものです。従来のC

igrep 2023/07/13

リンク

margin-inline:autoを使おう。margin-left:autoとmargin-right:autoを書くのが面倒なあなたへ

igrep 2023/06/08

CSS

リンク

Pico CSS • Minimal CSS Framework for semantic HTML

Minimal CSS Framework for Semantic HTMLA minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà! 12.1K GitHub Stars 74.1K Monthly Npm Downloads (Last month) 3.2M Monthly JSDelivr Requests (Last month) A Superpowered HTML ResetWith just the right amount of everything, Pico is a great s