こういうデザイン (Augmented UI? 拡張 UI？) を CSS で実装する方法
はじめに 言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。 このように、画像の一部が切り抜かれたようなデザイン。 このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。 Augmented UI Augmented UI とは、サイバーパンクなどでよく見る以下のような形を CSS で再現するライブラリの名称です。 augmented-ui - Integrate your apps with technology https://augmented-ui.com/ このライブラリ以外でこの名称を使用している例はまったく見当たりませんでしたが、共通認識を持つためにも、この名称がもっと広まることを願います。 なんでこのような形が Augmented UI なのかについて個人的に考えて
Chrome 129 Betaで追加されたCSSプロパティinterpolate-sizeとcalc-size()とは？
Chrome 129 Beta Chrome 129 Betaが2024-08-21にリリースされました。 position-area の名称変更や Intl.DurationFormat の追加といったアップデートが盛り込まれています。 本記事では、アップデートの中でも特に実験的な機能のひとつである interpolate-size と calc-size() について紹介します。 前提知識: intrinsic-size(内在サイズ) intrinsic-sizeはピクセルや一般的なパーセンテージ指定のような外部レイアウトに依存したサイジングではなく、要素に含まれるコンテンツの大きさを基準に要素のサイズを変更する仕組みです。 現在、auto や min-content、max-content といったキーワード値がこれに該当しており、それぞれ要素内コンテンツの折り返し可能なサイズを基準
display:contents;って何？どんな時に使うと便利なの？ - Qiita
先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents; とは？ 2-1. display:contents;の概要 display:contents;を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。 Mdn Web Docsでは以下のように説明されています。 これら
標準化されたCSSのzoomプロパティ
標準化されなかったzoom CSSのzoomプロパティをご存知でしょうか？ 有名（だった）なIE向けのハックとして *zoom: 1; などを記述したことがある人、または見たことがある人もいるかと思います。 zoom はIEの独自実装プロパティとして生まれいくつかのブラウザでサポートされたものの、長らく標準化されなかったことからサイトでの利用は推奨されることはありませんでした。 標準化されたzoomがNewly Availableに！ そんなzoomプロパティですが、標準化が進みBaseline 2024において「Newly Available」というステータスになりました👏 まだNewly Availableなので積極的な利用の推奨はできないものの、使い道を考えられるようになりました。 zoomに使い道がありそうな予感 CSSで要素を拡大する手段としてはtransform: scale
【CSS】「状態変化」と「バリエーション違い」はCSS変数で整理できる - Qiita
<div className={style.buttons}> <Button type="button" color="secondary" startIcon={<FiRotateCcw size={18} />} > キャンセル </Button> <Button type="submit" color="primary" startIcon={<FiCheckCircle size={18} />} > 次に進む </Button> </div> このボタンの仕様はざっくりと以下の通りです。 color Prop は以下の2通りの文字列を指定可能 "primary" … 青い背景、白文字 "secondary" … 薄灰色の背景、黒文字 startIcon Prop として ReactNode を渡せる 省略可。渡されたアイコンを、ラベルの左側に配置する つまり、「コンポジション」
Misconceptions about view transitions | Blog | Chrome for Developers
The View Transition API is a web development game changer. Whether your website is single or multi-page, this powerful API lets you create seamless transitions between views, resulting in native-like experiences that captivate users. Currently available in Chrome, with same document view transitions soon to be available in Safari. With more and more people starting to look into the View Transition
"If" CSS Gets Inline Conditionals | CSS-Tricks
A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. It was Lea Verou’s X post that same day that caught my attention: A historical day for CSS 😀🎉 If you write any components used and/or styled by others, you know how huge this is! background: if(style(–variant: success), var(–green)); E
不用意に 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
リンクの入れ子は 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 がまだない時代からいろ
Vivliostyleでなにができるの？ | gihyo.jp
Vivliostyle（ビブリオスタイル）はCSS組版を実現するオープンソースのライブラリ／アプリケーション群です。これから始まるこの連載は、そんなVivliostyleの魅力や可能性にさまざまな方向から迫ってみようという試み。まず第1回としてCSS組版とはなにか、そしてVivliostyleでどんなことが、どのようにしてできるのかをご紹介します。 CSS組版ってなに？ そもそも組版とはなんでしょう。一言でいえば文字・図版・写真などをページ上に配置することです。この記事では、とりわけCSSやHTMLといったWeb技術をつかうCSS組版を取り上げます。その最大の特徴はページ区切り（pagination）。ブラウザーではコンテンツをスクロールして読み進みますが、CSS組版ではページをめくることで読み進みます。結果として、CSS組版は印刷用データ（PDF）を作成する方法でもあります。現在CS
<button>とかのスタイルを消して書き直すときに考えることの備忘録
all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポーネントライブラリの使用が可能であれば、それが最も堅牢な選択肢でしょう。) 参考 各ブラウザのスタイルシート HTMLのスタイルシート UAスタイルの中には、CSSのカスケードルールの範疇で実装されているものもあれば、レンダリングエンジンの特別処理として書かれていて作者スタイルシートでの上書きが不可能なものもあります。これはブラウザ実装により異なります。 スコープ UIコンポーネントを作るような場面を想定しています。したがって、要素名自体は固定として、その中で見落としがち
Firefox 121 がリリースされて :has() が使えるようになりました。そして Intl.Segmenter は Firefox 123 で使えるようになる予定です。 - Qiita
Firefox 121 がリリースされて :has() が使えるようになりました。そして Intl.Segmenter は Firefox 123 で使えるようになる予定です。CSSJavaScriptFirefoxMDN はじめに この記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。 こんにちは。debiru です。「Firefox は利用者数が少ないので対応ブラウザから外します」とか言っているサービスは Web 標準を冒涜しているので滅んでどうぞ。 今日は記念すべき Firefox 121 リリース日なので、改めて Firefox 121 でできるようになったことをお伝えするとともに、Firefox 122 あるいは 123 でサポートされる重要な機能についてお話したいと思います。 Firefox 121 がリリースされたよ Firefox
2023年12月19日からFirefoxでも:has()が使えます - Qiita
はじめに この記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。 こんにちは。debiru です。HTML との最初の触れ合いは Windows 95 を使って Yahoo! ジオシティーズの Hollywood スペースに Web サイトを開設した頃です。 ええと、今日は Safari (+ iOS Safari) では 2022 年 3 月に、Opera, Edge, Chrome では 2022 年 9 月にサポートされ、もちろん Vivaldi でも使える :has() 疑似クラスが Firefox で長年（長年？）サポートされなくてもやもやしていた皆さんに朗報です。 2023 年 12 月 19 日リリース予定の Firefox 121 で :has() がサポートされるというお話をしに来ました。 みんな大好き :has() 疑似クラス
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする１ 概要 | フロントエンドBlog | ミツエーリンクス
2023年11月28日 CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする１ 概要 UI開発者 佐竹 Interop 2023の重点分野の中からWebページの表示性能に関わるCSS Containmentをご紹介します。 CSS Containmentにはcontainプロパティとcontent-visibilityプロパティが定義されており、コンテンツの一部を独立したサブツリーとしてブラウザに認識させる「封じ込め」に関する指定ができます。「封じ込め」を行うと、ブラウザはレンダリング処理の一部を省略したり、必要なタイミングでレンダリングするようになります。結果、Webページのレンダリングパフォーマン向上につながります。 レンダリングの基本的なフロー CSS Containmentの理解を深めるためにレンダリングについて確認します。 以下のフローはBlin
: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="email" required />な要素では入力されていない場合やemailとして許容されない文字列が入力がされている場合はinvalidな状態になり、emailとして許容される文字列が入力されている場合にはvalidな状態となります。 :validと
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 で代用するテクニックはも
style-dictionary を使ってフロントエンドで利用しやすいデザイントークンを生成する
tl;dr このレポジトリ から .style-dictionary の中身を持ってきて npm run build を実行してください yaml で書けて、 JSDoc がついた branded-type なデザイントークンがコード生成されます デザイントークンとは デザインシステムを構成する要素のひとつで、 UI における見た目の 各属性値 を共通化するためにトークンとして定義したものです。コンポーネントに適用された カラーコード や 余白 、 フォントサイズ などCSS のスタイルの値などが具体的なデザイントークンです デザインシステムの中でも、デザイントークンはハードルが低く（値の一覧を棚卸してトークンにするだけ）、また導入した場合の実効性が高いため（実装者、デザイン共に値を少なく管理しやすくしたいという要望がある）、とりあえず導入してみるだけでも効果があります デザインシステムに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - bramus/style-observer: MutationObserver for CSS. Get notified when the computed value of a CSS property changes.
AI CSS Animations
Bouncy Ball - Compare Web Animation Techniques
