: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と
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う 2023.10.13 ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか
Firefox 121でCSSの関係擬似クラス:has()に対応し、主要ブラウザすべてで使用可能に 12月19日、Firefox121がリリースされた。このバージョンで、CSSの関係（リレーショナル）擬似クラス:has()に対応した。ほかの主要ブラウザ（Chrome、Edge、Safari）ではすでに対応しており、これで:has()が一般的に使えるようになったと言える。 :has()を簡単に説明すると、あるセレクタ（A）に結合子（>、+、~などの明示的な結合子、または暗黙的な子孫結合子）を使って相対するセレクタをhas()内に記述し、その関係性を実際に持つ場合にセレクタ（A）にスタイルを適用できるという擬似クラス。 :has()を使うことで、子の要素に○がある要素、次の要素が△である要素といった、これまでできなかったかたちでスタイルを適用できるようなり、より効率的にCSSを書けるように
<details>要素のname属性サポート・:dir() CSS 擬似クラスなど - What's new in Browsers!
※ この記事は Cybozu Frontend Advent Calendar 2023 の 2 日目の記事です ! What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。 今回は Chrome 120 の更新内容から CSS/HTML に関する気になるトピックとして以下の 4 つをピックアップして紹介します。 Accordion pattern using name attribute on <details> :dir() pseudo-class selector CSS <image>, <transform-function>, <transform-list> syntax for registered custom properties Media Queries: scripti
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う 2023.10.13 ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか
CSS3 UI要素状態擬似クラス :disabled、:checkedの確認です。checkのオンオフが適用される対象としては、inputタイプのcheckboxやradioがあります。今回は、disabledの適用を考慮してcheckboxで試すことにしましたが、checkboxに限らずformに使う部品はブラウザ毎のデザインの違いが大きいので、一度ブラウザ固有のデザインを消して、CSSで再構築しています。 サンプルは、企業などの本店、支店を選ぶcheckboxになっています。本店は必ず選択（最初からチェック checked）、変更不可（チェックを外せない disabled）になり、東京は工事中ということで、利用不可（チェックできない disabled）。他はチェックのオンオフ可能という設定にしています。 サンプル サンプルのhtmlソース <div class="wrap"> <inp
<section className="sample1"> <ul> <li>アイテム 1</li> <li className="special-item">特別なアイテム</li> <li>アイテム 3</li> </ul> <ul> <li>アイテム 4</li> <li>アイテム 5</li> </ul> </section> ul:has(.special-item) { border: 2px solid blue; padding: 10px; } ul:has(.special-item) > li { font-weight: bold; } フォーム入力の検証結果に基づくラベルのカスタマイズ このサンプルでは、フォーム入力が有効か無効かに基づいて、ラベルにチェックマークまたはバツマークを表示します。:has疑似クラスを使って、隣接する入力フィールドの検証結果に応じたスタ
これは、サイバーエージェント24卒内定者アドベントカレンダー25日目の記事です。 Webフロントエンドのトピック以外にもたくさんの記事が公開されているので、ぜひみてみてください！ 今回は、最近特に英語圏で注目を集めているCSSライブラリ「CSS Hooks」についてご紹介します！ このライブラリは、CSS Modulesのco-authorでvanilla-extractの作者であるMark Dalgleish氏が大注目しており、自分はこのポストが知るきっかけになりました。 日本語での情報が少なそうだったので、基本的なライブラリの紹介、使い方、仕組みについて触れていこうと思います。 CSS Hooksとは Inline styles形式で型安全にCSSを記述できるライブラリです。 通常のInline stylesと異なり、擬似クラスやメディアクエリ、コンテナクエリなども同様にInline
カスタム要素の状態を定義する CustomStateSet と参照する擬似クラス :state() Safari 17.4 で CustomStateSet がサポートされた。CustomStateSet は Web Components のカスタム要素の状態を管理する API で、Element Internals の states プロパティに含まれる。Element Internals はカスタム要素の振る舞いを HTML のフォームと連動させるための仕様だ。 CustomStateSet は JavaScript のグローバルオブジェクトである Set と同様のインターフェースで、CustomStateSet に追加された文字列がカスタム要素の「状態」を定義する。 次のデモは HTML の minlength 属性を <input type="number"> で動的に設定し振る舞
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う
Firefox 121でCSSの関係擬似クラス:has()に対応し、主要ブラウザすべてで使用可能に | gihyo.jp
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う
csstest： CSS3 UI要素状態擬似クラス :disabled、:checkedの確認
ようやく全ての主要ブラウザで使用可能になるCSSの擬似クラス:hasを使ってみよう
Inline stylesで擬似クラスが書ける! CSS Hooksが面白い
カスタム要素の状態を定義する CustomStateSet と参照する擬似クラス :state()
CSSの擬似クラス:link, :visited, :hover, :active, :focusの使い方