tak-dcxi

font-size には rem を使うべきかどうかについての見解

結論

• 可能であれば Chrome の文字拡大機能をサポートするためにremを使用する。
• ただし、実際に Chrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。

結論に至った背景

「font-size には rem を使いましょう」という教えが独り歩きしており、実際に Chrome の文字拡大機能を「極大」にして検証していない人が多いため。

tak-dcxi

fit-text {
  display: block flow;

  &::part(svg) {
    display: block flow;
    inline-size: 100%;
    block-size: auto;
  }

  &::part(text) {

tak-dcxi

/**
 * 要素の位置情報を監視してCSS変数として:rootに設定するWeb Component
 * AnchorPositioningのような位置指定に使用可能
 *
 * @example
 * ```html
 * <rect-observer var-prefix="global-header">
 *   <header>...</header>
 * </rect-observer>
 * ```

tak-dcxi

export type ObserverOptions = {
  root?: HTMLElement | null;
  rootMargin?: string;
  threshold?: number | number[];
};

const defaultOptions: ObserverOptions = {
  root: null,
  rootMargin: "0px",
  threshold: 0

tak-dcxi

「@scope入門」という記事を読んで改めて @scope の設計方法を考える

ICS MEDIAで新しく掲載された以下の記事を読みました。

https://ics.media/entry/250520/

大前提として、私は ICS MEDIA の記事を愛読していますし、池田さんをはじめとして ICS で働くエンジニアの方々とはリアルで親交もあり、尊敬しています。

上述した「@scope入門」という記事に関しても @scope の基礎的な使い方が纏まっており、黎明期ゆえに文献の少ない @scope にフィーチャーした参考記事としては質の高い記事であることは間違いありません。

tak-dcxi

/**
 * Add ARIA attributes to table elements and their children.
 * When the display property is changed with CSS, the element may not be recognized as a table.
 * @see https://adrianroselli.com/2018/05/functions-to-add-aria-to-tables-and-lists.html
 * @param {HTMLElement} container - Container element to apply ARIA attributes to
 * @returns {void}
 */
function addTableARIA(container: HTMLElement): void {
  const tables = container.querySelectorAll<HTMLTableElement>("table");
  for (const table of tables) {

tak-dcxi

技術記事執筆スタイルガイド

このファイルは、高品質で一貫性のある技術記事を執筆するためのスタイルガイドです。あなたの文体の特徴と執筆依頼の要件を統合した、包括的な指針として機能します。

1. 文章の基本スタイル

1.1. 口調・トーン

• AI特有の英文を和訳したような表現（例：「〜の世界へ飛び立ちましょう」）は避けて、日本語の技術記事のような自然な文体を心がける。
• です・ます調を基本とし、読者に対して丁寧で親しみやすい語りかけを心がける。

tak-dcxi

タイポグラフィ

汎用的な文章の折り返し指定

• 下のような指定を:rootに指定しておく。

:where(:root) {
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  /* word-break: initial; 単語の分割はデフォルトに依存（初期値のため指定しなくて良い） */

tak-dcxi

module.exports = {
  rules: {
    'unit-disallowed-list': [
      [
        'vw',
        'vh',
        'vi',
        'vb',
        'vmin',
        'vmax'

tak-dcxi

{
  "container": {
    "prefix": "container",
    "body": [
      "--_container-size-min: $1;",
      "--_container-size-max: $2;",
      "--_to-cqi-min: calc(tan(atan2(1px, var(--_container-size-min))) * 100cqi);",
      "--_to-cqi-max: calc(tan(atan2(1px, var(--_container-size-max))) * 100cqi);",
      "container: $3 / inline-size;",
      "@container style(--debug: true) {",