への感謝の投稿です クラウドフォーのブログ。必ず購読すべきものの1つです。私は、彼らが投稿したほぼすべての投稿を、自分の投稿アーカイブに追加して詳しく調べていることに気づきました。それで、私はそれらで少し溢れていて、話題のものもあったので、それとたくさんのお気に入りを共有しようと思いました。
で レスポンシブな文字間隔Tyler Sticka では、文字の間隔を狭くしたいが、賢く対処したいというシナリオを取り上げています。大きな文字サイズでは、少し締めると良い感じになります（私はそれを付けました） 私自身のスターター) ただし、フォント サイズが小さいと、読みやすさが損なわれます。使用する em フォント サイズに合わせて自動的に拡大縮小されるため、最初は適切ですが、サイズが小さくなるにつれてサイズを小さくすることをお勧めします。幸いなことに、タイラーは素晴らしいものを見つけました それを行う方法 と clamp()。
* {
letter-spacing: clamp(
-0.05em,
calc((1em - 1rem) / -10),
0em
);
}Code language: CSS (css)偉大な頭脳は私が考えていたのと同じように考えています ワンタイムパスワード入力のUI/UXパターン 最近も。タイラーはここでも独自の方法でそれに取り組みます シンプルなワンタイムパスコード入力。私たちは同意します: しないでください 実は 複数にする スタイリングの観点から見ても魅力的な要素です。これを適切に機能させるには必要な JavaScript が多すぎるため (簡単に壊れる可能性があります)、それ以外の場合は無料で入手できます。 しないでください それをしてください。代わりに、入力に適切な属性セットを使用します。
input type="text"
inputmode="numeric"
autocomplete="one-time-code"
maxlength="6">Code language: HTML, XML (xml)あとは CSS でスタイルを設定するだけで、好みの見た目にできます。つまり、 入力マスク スタイルだけで。
私はちょうど JPEG XLの喪失を嘆く 先日ですが、 コンテナクエリ、レスポンシブイメージ、JPEG-XL について 数年前、ジェイソン・グリグズビーはすでに悲しみの中にいた。現代における CSS の偉大な啓示の 1 つであるコンテナ クエリは、ページ上での表示方法に関する入手可能な情報を使用して最も適切な処理を実行したいという点で、レスポンシブ画像と精神的に結びついています。彼らは仲良くなり、情報を共有できると思うかもしれませんが、それは間違いです。役立つように構文を進化させることもできますし、おそらくそうすべきですが、興味深いのは JPEG-XL です。 画像フォーマット、実際にはこれを支援するためにある程度設計されており、実際に使用できた場合は、Web 開発者にとって偶然の贈り物になったでしょう。
画像と言えば、GIF はパフォーマンスが最悪なので、もう使うべきではないことは誰もが知っていると思いますが、GIF はビデオで再現できます。私はビデオのアプローチを好む傾向がありますが、注意すべき重大な欠点もあります。
- コリン・ベンデル氏は、ブラウザはビデオをプリロードしないと指摘した、知覚されるパフォーマンスに影響を与える可能性があります。
- デフォルトでは、ビデオ エクスペリエンスは GIF らしくありません。次のような魔法の組み合わせが必要です。
autoplay、loop、mutedそしてplaysinline同様の動作を実現するための属性。- の
videoこの要素は、より多くの再生制御の可能性を明らかにし、アクセシビリティには役立ちますが、機能が欠けています。alt代替テキストの属性。 (title代替コンテンツは同様の方法で支援機器に公開されないようですが、おそらくaria-labelまたはaria-labelledbyうまくいくだろうか？）
タイラー氏は代替手段を検討しましたが、新しい画像形式という非常に強力な候補がいくつかありました。しかし、（驚いたことに）ブラウザのサポートの話は危険です。
ヘラルド・ロドリゲスが語る HTML Light DOM Web コンポーネントのテスト: 予想よりも簡単! 本当に、知ってよかったです。ここでのテストとは、ブラウザのような環境でコンポーネントをロードし、DOM 内に期待されるものがそこに存在し、DOM との対話が期待どおりに動作することを確認することを意味します。
それはあなたとは違います できない Shadow DOM を使用する Web コンポーネントをテストしますが、実際には、これは多くの場所で手動で考慮する必要がある厄介な障壁であり、他のツールも認識して連携する必要があります。参考になるサンプルコードがここにあるのはうれしいです。
はい、もう 1 つです。 これは素晴らしいデモです 一般的な Web アプリのインタラクションの説明。これは、CodePen 上のより多くの場所に「一括アクション」を適切に実装する必要があることを思い出させてくれます。
Views: 1
