シンタックスハイライトをライブラリなしで簡単に！Custom Highlight APIの魅力 - コハム
Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ
Animating Layouts with the FLIP Technique | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this – as Nick Babich said, animation brings user interfaces to life. However, adding meaningful transitions and micro-interactions is often an a
巷で噂のshadcn/uiをNext.jsで使ってみた - Qiita
shadcn/uiとは shadcn/uiとは、これは Radix UIとTailwind CSSを使って書かれた UI コンポーネントをまとめたもので、TailwindCSS を通じてスタイルをカスタマイズできる。2023 JavaScript Rising Starsでは、全Projectで見事ランキング1位に輝いた!! shadcn/uiは、柔軟性 と カスタマイズ性 が高く、必要なコンポーネントだけを選択し、カスタマイズできる。また、通常のコンポーネントライブラリとは異なり、npmパッケージとして配布されていないので、npmの依存関係に影響しない。コンポーネントのコードはCLIでダウンロードする。 インストール この記事では、Next.jsの場合を紹介する。Viteなど他のフレームワークのインストール方法はInstallationを参照。 # npx create-next-app
Incomplete List of Mistakes in the Design of CSS [CSS Working Group Wiki]
That should be corrected if anyone invents a time machine. :P
最上位レイヤ: Z-index:10000 | Blog | Chrome for Developers
最上位レイヤはブラウザのビューポートで、関連する document の上に位置し、各 document に 1 つの最上位レイヤが関連付けられています。つまり、最上位レイヤにプロモートされる要素は、z-index や DOM 階層を気にする必要がありません。また、::backdrop 疑似要素を使って操作することもできます。Fullscreen は、dialog のサポートが登場する前の最上位レイヤの好例だったため、Fullscreen API の仕様がさらに詳しく説明されています。 最上位レイヤは、document の残りの部分より上にコンテンツをレンダリングする問題の解決に役立ちます。 注意すべき重要な点: - 最上位レイヤは document フローの外部にあります。 - z-index は最上位レイヤに影響しません。- 最上位レイヤの各要素には、スタイルを設定可能な ::backd
Proposal: Custom CSS Functions & Mixins · Issue #9350 · w3c/csswg-drafts
Background Read the full explainer There's an existing issue for Declarative custom functions, which forms the basis for much of this proposal. I'm opening a separate issue here, in order to make a broader proposal building on that, which includes both functions and mixins. From a language perspective, mixins and functions are somewhat distinct – they live at different levels of the syntax, and co
CSS vertical writing mode for form control elements | Blog | Chrome for Developers
Rolling out from Chrome 119 to 123 is a new international CSS feature from CSS Writing Modes Level 4. Vertical writing mode for form control elements means that these elements can be displayed in vertical writing modes. By Chrome 123 the feature will be enabled for all users, this post explains the feature. Vertical writing mode for text-based form control elements Once this feature is fully enabl
Android 版 Chrome でのビューポートのサイズ変更動作の変更に備える | Blog | Chrome for Developers
11 月の Chrome 108 のリリースに伴い、画面キーボード（OSK）が表示されたときのレイアウト ビューポートの動作が一部変更されます。この変更により、Android 版 Chrome ではレイアウト ビューポートのサイズが変更されなくなり、代わりにビジュアル ビューポートのみがサイズ変更されます。これにより、Android 版 Chrome の動作は、iOS 版 Chrome および iOS 版 Safari と同等になります。 現在の状況、Chrome がこの変更を行う理由、必要な準備について、以下でご紹介します。 レイアウト ビューポートとビジュアル ビューポート ウェブサイトにアクセスしても、読み込まれたページのコンテンツ全体を見ることはできません。代わりに、ページの一部を表示するためのビューポートがブラウザに表示されます。このビューポートは、レイアウト ビューポートとも呼
あっ、そうだ！モダンCSSをまとめておこう
2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー
CSS だけで動くスクロールドリブンアニメーション
CSS だけで動くスクロールドリブンアニメーション 2023.12.17 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。 スクロールドリブンアニメーションを利用することで、例えばスクロールの進行状況を表すバーであっ
Cyclic Dependency Space Toggles
Cyclic Dependency Space TogglesOver the past few years, I wanted to be able to select a value from a list in CSS by toggling a single custom property. We have the “space toggle” for booleans, and hopefully, one day, we’ll get style queries, but what about today? In this article, I present you with the technique I recently discovered. The Technique Let me startGo to a sidenote by showing you the co
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS Text モジュール レベル 4 の 4 つの国際化 CSS 機能が Chrome に導入されます。この投稿では、すでに発送済みのサービスと今後の予定について説明します。 Chrome 119 以降: 日本語のフレーズが word-break: auto-phrase で改行されるようになりました。 Chrome 120 以降のフラグの背後: text-autospace プロパティによるスクリプト間のスペース 開発中: text-spacing-trim プロパティによる中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズが統一されます。 日本語のフレーズ改行: word-break: auto-phrase 日本語のテキストが読みやすくなるこの機能は Chrome 119 から利用可能 中国語や日本語などの東アジア言語では、単語の区切りにスペースを使
Thinking in StyleX | StyleX
Core PrinciplesTo understand why StyleX exists and the reasoning behind its decisions, it may be beneficial to familiarize oneself with the fundamental principles that guide it. This may help you decide if StyleX is the right solution for you. These principles should also be helpful when designing new APIs for StyleX. Co-locationThere are benefits of DRY code, but we don't think that's usually t
意外と知らないvisibilityの活用方法！ | フロントエンドBlog | ミツエーリンクス
※もっと具体的に知りたい方はCSS 2.2の11.2 Visibility: the 'visibility' propertyなどをご覧ください。 visibility vs display vs opacity ただ要素を見えなくするだけなら透明度を操作するopacityプロパティがあります。しかしそれよりもvisibilityが優れている点は、不可視になる（値がhiddenやcollapaseになる）と同時にアクセシビリティツリーからしっかり削除され、スクリーンリーダに読み上げられずタブフォーカスも当たらなくなるというところです1。display: none;との違いは「表示領域が残るかどうか」以外違いはありません。 特に、値collapseはテーブルなどで特定のセルや行だけを非表示にしたい場合などにも重宝します。display: none;でも同じような表現になりますが、colla
CSS Nesting and the Cascade
You might have noticed that Safari Technology Preview 179 includes an update to CSS Nesting that adds support for the new “relaxed parsing behavior”. What does this mean? It means you no longer have to worry about whether or not each nested selector starts with a symbol. It means that now nested CSS like this will work just fine: article { h1 { font-size: 1.8rem; } p { font-size: 1.2rem; } } (If y
Four new CSS features for smooth entry and exit animations | Blog | Chrome for Developers
Motion is a core part of any digital experience, guiding your user from one interaction to the next. But there are a few gaps in smooth animations on the web platform. These include the ability to easily animate entry and exit animations, and smoothly animate to and from the top layer for dismissible elements such as dialogs and popovers. To fill these gaps, Chrome 116 and 117 includes four new we
最近のNext.js（React）でのCSS戦略
はじめに Reactの実装においてスタイルを当てる手段は複数ありますが、今回は昨今のNext.js（特にApp router）環境下でのCSS戦略について個人的な見解を記していきたいと思います。 選択肢が多すぎるスタイリング そもそもReactで実装する上でアプローチできるスタイリングの段が多すぎる（と感じる）現状。 簡単にですが、現状のフロントエンドにおいてスタイリング方式は下記のような属性ごとに分けられます。 CSS Preprocessor & CSS modules CSS-in-JS Utilty first css(tailwindCSS など) ちなみにState of CSS 2022によると、直近ではCSS ModulesやTailwind CSSが一番多く使われているデータが上がっています。 Next.js（v13~）の流れを受けて Next.js v13以降では、新た
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Magic in Shiki Magic Move
Z-index and stacking contexts | web.dev
ZOZOTOWN に CSS in JS（Emotion）を導入して1年後の状況
