シンタックスハイライトをライブラリなしで簡単に！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の欠点 制限されたスタイリングオ
accent-color でフォーム要素の色を変える - Goodpatch Tech Blog
css accent-color Design Div 所属のフロントエンドエンジニア 上垣 です。 チェックボックスやラジオボタンなどのフォーム要素を、ブラウザのデフォルトスタイルをリセットしてゼロから作るのは、やってみると意外と考慮することが多くてなかなか大変ですよね。 できればデフォルトのフォーム要素を使いたいけど、ブラウザのデフォルト要素ではサイトのトンマナに合わないんだよな〜、というケースもあると思います。 この記事では、そんな場合に accent-color を使って、フォーム要素の色を変更する方法をご紹介します。 accent-color が対応しているフォーム要素 シンタックス 実装結果 画像(macOS Chrome101, dark モードで表示) コードペン 対応ブラウザ 仕様書 accent-color が対応しているフォーム要素 対応しているフォーム要素は、今のと
Show a browser picker for date, time, color, and files | Blog | Chrome for Developers
For a long time, you had to resort to custom widget libraries or hacks to show a date picker. The web platform now ships with the HTMLInputElement showPicker() method, a canonical way to show a browser picker not only for dates, but also time, color, and files. Background A frequent request we hear from web developers is: How do I programmatically show a picker for controls like date? Stack Overfl
Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
Focus transition
Playground Placebo button Why? Keyboard navigation has a major downside: it’s not clear where the focus moves upon pressing the Tab key. Animation makes the transition more apparent. How? Flying Focus creates an element that is moving when the focus event happens. outline: 5px auto -webkit-focus-ring-color makes the element look like it has a focus. It only works in Safari and Chrome. Firefox does
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
