tak-dcxi

CSS Responsive Rules

目的

レスポンシブ実装の判断基準を明確にし、不要なブレイクポイントとコード量を最小化する。 CSS はブラウザへの「提案」であり、厳密な命令ではない。ブラウザに委ねられる仕事は委ねる。

基本方針: エスカレーション順序

レスポンシブ対応は以下の優先順序で検討する。上位で解決できるなら下位は使わない。

tak-dcxi

name	animations
description	UI アニメーションの要否判断、動き方・見せ方・実装方針の提案、パフォーマンスとアクセシビリティのレビューを行う。対象は hover, active, focus, popover, tooltip, dropdown, dialog, tab, segmented control, card, button, toast, accordion, carousel, scroll-linked animation, View Transitions など。

Animations Skill

以下のようなタスクでこの Skill を使うこと。

• UI にアニメーションを追加する

tak-dcxi

Draft: CSSのレビュー時に確認しておくものリスト

• 下書き途中なのでそのうちまだ増える予定である。
• あくまで自分用であり、他人にこうレビューしろという意図はない。
• ある程度書ききったら非公開にする可能性もある。

マインドセット

• 指摘をする際は、必ず「理由」と「解決策」をセットにする（「この書き方はダメです」だけではレビューにならない）。
• [MUST] は、仕様・コーディング規約に反するもの／バグが起きているもの／将来的に深刻な問題になりそうなもの／ユーティリティ・アクセシビリティを阻害しているものを優先して扱う。次点として「改善したほうが良いもの」を挙げる。

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

/**
 * 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

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

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

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

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

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

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) {",