TypeScirptのプロジェクトでpathにaliasを設定して、/srcディレクトリを@としてimportしたい
まずはtsconfig.jsonでpathsを設定する
{ "compilerOptions": { ~~~ "baseUrl": "./", "paths": { "@/*": ["src/*"] }, ~~~ } }
次にwebpack.config.jsでaliasを設定する
import { Configuration } from 'webpack'; const config: Configuration = { ~~~ resolve: { extensions: ['.ts', '.tsx', '.js', '.json'], alias: { '@': path.resolve(__dirname, 'src') } }, ~~~ }; export default config;
最後にJestの設定しないとエラーになる
moduleNameMapperを使って設定する
これで@でsrc配下にアクセスすることができるようになった
WebアクセシビリティガイドラインのWCAGについて
WCAG2.X と WCAG3.0 の違いがわからなかったので調べた
ガイドラインによるとWCAG2.Xとの違いは以下
2.Xは廃止ではないことに注意したい
また、WCAG3.0で新たにスコアリングメカニズムが導入されたため、2.Xのように一つ漏れると適合しないというわけではなく平均点で評価されるようになった
レベルはゴールド、シルバー、ブロンズとなっており、ブロンズレベルに適合するには、重大なエラーはなく、各機能カテゴリ内で少なくとも3.5の合計スコアと少なくとも3.5のスコアが必要となる
State of CSS 2022 を眺めていて知らなかったことについて調べた
@supportsはブラウザーが特定のCSS機能をサポートしている場合に定義することができるクエリ
以下の記事にあるように、確かにCSSはブラウザが理解できない機能はそれらを無視して、何かがあればそれより前に宣言されたものでフォールバックするので、冗長的な機能なのではと思ったが、有効な場面があるみたい
How @supports Works | CSS-Tricks - CSS-Tricks
例えば、サイトがgridをまだ使えないブラウザバージョンをサポートしている場合、これまでは諦めて古いやり方を用いるしかなかったが、@supportsを使えば今後のためにgridで作っておくことができる
これを聞くとすごい便利そうなので、どんどん使っていきたい coliss.com
CSSアニメーションをGPUを使って処理させるハードウェア・アクセラレーションをどの要素に適用するかを前もってブラウザに伝えるプロパティ
これにより、その要素の変更が行われる前に、適切な最適化をセットアップすることができるためアニメーションのちらつきがなくなる
min()・max()・clamp()関数のこと
min()は以下のように定義して、どちらか小さい方の値を値を表示
width: min(50vw, 600px);
max()は逆にどちらか大きい方の値を値を表示する
width: max(50vw, 400px);
clamp()は以下のように３つ（最小値、推奨値、最大値）の値を指定し、その中の値から条件に合う値を表示する
width: clamp(400px, 50vw, 600px);
paddingやfont-sizeにも使えるみたいなので試してみたい
State of CSS 2022 を眺めていてアクセシビリティに関する知らなかったことを調べた
ライトテーマとダークテーマを切り替えるプロパティ developer.mozilla.org
その要素が両方サポートする場合以下のようにし、
color-scheme: light dark;
ライトテーマだけにする場合は以下にする
color-scheme: light;
そして、ダークテーマだけにする場合は以下にする
color-scheme: dark;
これは要素ごとに指定できるので、ページのある部分だけライトとダークを別のテーマにすることができる
視覚障害のあるユーザーが背景色と文字色等とのコントラストを設定で切り替えている場合に、それに応じたスタイルを切り替えるためのプロパティ
以下のようにして使う
.contrast { width: 100px; height: 100px; outline: 2px dashed black; } @media (prefers-contrast: more) { .contrast { outline: 2px solid black; } }
ハイコントラストモードにしている場合、CSSで色を変えても黒色にしか表示されないが
forced-colors-adjustは強制的に色を指定することができるプロパティ
forced-color-adjust: none;
フォーカスされた要素のスタイルを定義するプロパティ
フォーカス時の青い枠線の色を変えたい時に使えそう
input:focus-visible { outline: 2px solid crimson; border-radius: 3px; } select:focus-visible { border: 2px dashed crimson; border-radius: 3px; outline: none; }
State of CSS 2022 を眺めていて知らなかったことのうち、scrollbar-gutterについて調べた
scrollbar-gutterプロパティはWeb でスクロールバーを表示する際の余白を制御することができる
スクロールバーは種類によってはコンテンツのレイアウトが変わり、レイアウトシフトが起きてしまう可能性がある
そこで、scrollbar-gutterを使うと、事前に余白を用意しておくなどができ、レイアウトシフトが起きないようにすることができる
例えば、事前に余白を用意しておく場合
scrollbar-gutter: stable;
両側に同じくらいのスペースを用意しておく場合
scrollbar-gutter: stable both-edges;
このような感じでスペースを確保できる
State of CSS 2022 を眺めていて知らなかったことのうち、object-view-boxについて調べた
object-view-boxプロパティは、chrome104で実装された機能で、画像要素のズームまたはパンを可能にする
First Look At The CSS object-view-box Property | CSS-Tricks - CSS-Tricks
以下のように指定する
object-view-box: <basic-shape-rect>;
<basic-shape-rect>は以下で定義されているが、使えるのはinsetのみ
鹿野さんが紹介しているような使い方がよさそう
Chrome 104から使えるCSSのobject-view-boxが便利✨
— 鹿野 壮 Kano Takeshi (@tonkotsuboy_com) 2022年8月3日
画像にホバーしたとき、サイズを変えずに中身だけズームインアニメーションという定番表現。
object-view-box: inset(0%);
から
object-view-box: inset(10%);
にtransitionさせれば、超手軽に実装できる💪
デモhttps://t.co/FZl6q4xZPB#CSS pic.twitter.com/ngtl2O4nCm
State of CSS 2022 を眺めていて知らなかったことのうち、@containerについて調べた
@containerはコンテナクエリといい、@media（メディアクエリ）と似た使い方になるが@mediaと異なる点は、ビューポートサイズではなく親コンポーネントサイズに基づいてスタイルを定義するということ
例えば、コンテンツの横幅が800px以上ならヒーローコンテンツに
600px以上なら横サムネイル型に
そうでない場合は縦カード型にするというような使い方ができる
これはめちゃくちゃ便利だと思った
FireFox以外のモダンブラウザでは使えるようなので注目したい
