주제: css
-
프린트 스타일시트: 웹 페이지를 종이와 PDF에서도 쓸 수 있게 만들기
프린트 스타일시트는 내비게이션과 컨트롤을 숨기고, 접힌 콘텐츠를 펼치고, 링크 텍스트 뒤에 링크 대상을 함께 출력하고, @page로 페이지 크기와 여백을 지정하고, break-inside: avoid로 표와 그림이 페이지 사이에서 잘리지 않게 하며, 브라우저에 꼭 필요한 배경색은 유지하도록 요청합니다. 화면뿐 아니라 브라우저의 인쇄 미리보기로도 반드시 테스트해야 합니다.
-
Web font loading: font-display, preload, unicode-range subsetting and metric-matched fallbacks
Show text on first paint and load the brand font without layout jumps: subset faces with unicode-range so only used scripts download, choose font-display per role (optional for body text, swap for headings), preload the first-paint files with crossorigin, and declare a fallback face with size-adjust and ascent/descent overrides so lines wrap the same before and after the swap.
-
Locale-aware interfaces: Intl plural rules, dates and right-to-left layout
Format numbers, dates and relative times with the browser's Intl objects instead of string arithmetic, pick plural forms by Intl.PluralRules categories rather than n == 1, lay out with CSS logical properties so a dir=rtl document mirrors itself, and leave room for text that expands when translated.
-
Lesbarer Fliesstext: Zeilenlänge, Zeilenabstand und Kontrast
Drei Eigenschaften entscheiden, ob langer Text bequem lesbar ist: die Zeilenlänge (das AAA-Kriterium der WCAG deckelt sie bei 80 Zeichen), der Zeilenabstand (mindestens das 1,5-Fache der Schriftgrösse muss möglich sein, ohne dass das Layout bricht) und der Kontrast (4,5:1 für normalen Text, 3:1 für grossen). In relativen Einheiten setzen, damit Nutzende Text vergrössern und neu spationieren können.
-
SVG icons: inline markup, a sprite with use, or an img element
Inline SVG can be styled with currentColor and CSS but repeats bytes on every occurrence; a same-origin sprite referenced with use is cached once and still follows the text colour; an img is cacheable but opaque to CSS. Pick per icon role, keep decorative icons hidden from assistive technology, and size every icon so nothing shifts while the sprite loads.
-
Readable body text: measure, line height and contrast
Three properties decide whether long text can be read comfortably: line length (WCAG's AAA criterion caps it at 80 characters), line spacing (at least 1.5 times the font size must be possible without breaking the layout) and contrast (4.5:1 for normal text, 3:1 for large text). Set them in relative units so users can resize and re-space the text.
-
Dark mode with prefers-color-scheme, color-scheme and light-dark()
Dark mode has three parts: the prefers-color-scheme media query to detect the user's choice, the color-scheme property (and meta tag) to tell the browser which schemes the page supports so form controls, scrollbars and the canvas follow, and light-dark() or custom properties to swap palette values without duplicating rules.
-
CSS layout: when to use flexbox and when to use grid
Flexbox is a one-dimensional model that distributes space along a row or column; grid is two-dimensional and defines rows and columns together. Use flexbox for content-driven groups and grid for page and form structure; combine them, use gap, and let items shrink so text does not overflow.
-
CSS custom properties for theming: inheritance, fallbacks and @property
Custom properties (--name) cascade and inherit like other properties and are read with var(--name, fallback); an invalid substitution does not discard the rule but falls back to the initial or inherited value, and @property adds a type, an initial value and animation support. Structure them as raw tokens plus semantic roles and override roles per scope to theme.
-
prefers-reduced-motion: which animation to reduce and how
The prefers-reduced-motion media feature reports whether the user has asked the operating system for less motion; its values are no-preference and reduce. Honour it by replacing large movement (parallax, zooms, slides, autoplaying motion) with fades or instant changes, while keeping small state transitions that carry meaning, and apply the same rule to script-driven animation.
-
Components sized with container queries need fewer placement-specific overrides than components sized with viewport media queries
Hypothesis: when the same component set is placed in several layout slots, the container-query implementation contains fewer CSS rules that exist only to correct a component for one placement than the media-query implementation, and adding a new placement needs no new component CSS; a two-implementation comparison with rule counts is proposed.
-
Container queries: sizing components by their container instead of the viewport
container-type turns an ancestor into a query container and @container applies rules to its descendants based on that container's size, with cqi and cqw units for fluid values; a component can then carry its own breakpoints and adapt to a sidebar, a main column or a modal without placement-specific overrides.
-
Touch targets and pointer types: sizing controls for fingers and mice
WCAG 2.2 requires pointer targets of at least 24 by 24 CSS pixels at level AA, with exceptions for spacing, inline links and equivalent controls, and 44 by 44 at level AAA. The pointer and hover media features report whether the primary input is coarse or fine and whether it can hover, so a design can enlarge controls and drop hover-only interactions where a finger is the pointer.
기계 판독 가능: JSON