css

Bilingual

System shock
2 months ago
- Medium's design team experimented with using system fonts for their UI typography refresh.
- They included the CSS value 'system' as a future-proof entry in the font-family stack.
- After launch, users on Windows reported seeing a pixelated, retro font instead of modern system fonts.
- The culprit was the old Windows 3.0 bitmap font named 'System', still present in modern Windows for backward compatibility.
- The fix was simply removing the 'system' entry from the CSS font list.
- The author found the bug delightful, recreated the vintage font in vector format, and created a secret version of Medium to showcase the retro look.
Beej's Bit Bucket
2 months ago
- CSS lacks variables, leading to hard-coded constants like theme colors that are difficult to maintain.
- m4 is a macro processor that can substitute strings, enabling easy updates to CSS values.
- Basic usage: define a macro with `define(`NAME', `value')` and use it in CSS; run `m4 file.css.m4 > file.css`.
- Quoting in m4 uses backtick (`) as open and apostrophe (') as close to prevent macro expansion.
- The `dnl` directive deletes the newline after a define line to avoid extra blank lines in output.
- Parentheses after macro names (e.g., `THEMECOLOR()`) allow macros to be placed adjacent to other text.
- External files can be included via `include()` or `sinclude()` for modular CSS.
- Integer math is possible with `eval()`, e.g., `eval(XPOS + 40)` for computed positions.
- m4 can also be used for HTML, but caution is needed due to lack of multibyte support and potential complexity.
- Other CSS-specific tools like Less and Sass exist, but m4 is lightweight, POSIX-compliant, and widely available.
CSS: Unavoidable Bad Parts
2 months ago
- HTML5 semantic tags like <main>, <article>, <nav> help structure pages; less obvious elements like <ul>, <details>, <dl> are also useful.
- Avoid excessive wrapper elements; prefer semantic markup and CSS that works with it.
- Layout is fundamentally hard in GUI frameworks; understand the layouts a system allows rather than forcing your own.
- Browser default styles differ, so use a CSS reset or normalization for consistency.
- Classless CSS (styling HTML elements directly) can be effective after reset, avoiding complex selectors.
- CSS selectors enable problematic inheritance; consider classless CSS/inline styles or component-scoped nesting.
- Always set box-sizing: border-box to make padding and borders not affect overall size.
- Margin collapsing combines margins via max rather than sum, which is useful but surprising; consider using owl selector for parent-controlled spacing.
- Default flow layout is document-oriented; use flexbox for spatial control.
- Responsive design can often be avoided by relying on HTML's inherent reflow and setting max-width on text columns.
- CSS pixels are visual angle units, not physical pixels; sizing in pixels works across displays.
- Font-size is inconsistent across fonts; use font-size-adjust to normalize, and check readability on different configurations.
- Line-height can cause unexpected shifts when mixing fonts; it's the height of a line box, not the glyph height.
- Vertical rhythm (aligning lines across elements) is often unnecessary for single-column layouts.
- Word-break issues occur with long unbreakable spans like code or URLs; use tips to prevent horizontal overflow.
Preventing line breaks in <code> elements
2 months ago
- The author uses non-breaking spaces/hyphens in body text to prevent awkward line breaks for phrases like '5 cm' or 'New York'.
- They extended this practice to <code> elements to avoid unhelpful line breaks in code snippets, such as splitting '--multiline' or '(?-u:…)'.
- To prevent line breaks, they add the 'nowrap' class to short <code> elements (15 characters or less) that contain hyphens or spaces, using a Python regex.
- A CSS rule with 'text-wrap: nowrap' is applied to the 'code.nowrap' class to enforce no line wrapping, though it's a minor improvement.
Librrd Playground
2 months ago
- Terminal stations can be written with quotes, and braces {} allow specifying class or ID.
- Unwanted collapsing is prevented with empty sequences.
- Layout stylesheets are modeled after CSS, with selectors including terminal, nonterminal, sequence, stack, wildcard, class, ID, :root, descendant, and child combinators.
- Specificity and cascading follow CSS rules.
- Properties include align-items (inherited), align-self (overriding, with left/right sides), justify-content, flex-absorb (inherited, 0-1), gap, continuation-marker, and font (family, style, weight, size).
Jitter
2 months ago
- The narrator, a senior web developer, hates attending meetings that often lack agendas and involve unnecessary participants.
- Despite being near the end of her workday, she is called to a meeting to help with a CSS layout issue that AI (ChatGPT, Claude) couldn't solve.
- She quickly fixes the problem by suggesting 'overflow: auto' on a div, but notices a colleague (Mark) repeating words like 'dude', 'man', and 'bro' in a glitchy manner.
- Suspecting a moral panic due to her transgender identity, she uses CSS code to pause and reduce motion, which calms Mark down and resolves his repetitive behavior.
- The meeting ends with Mark resting, and the narrator leaves early, reflecting on the unhelpful other attendees.
Show HN: Justif – Knuth-Plass justification and microtypography for the web
2 months ago
- justif is a web tool for publication-grade text justification.
- It allows side-by-side comparison of browser and justif rendering.
- Users can control flicker, metrics, and various typographic features.
- Features include hyphenation, protrusion, expansion, and tracking.
- Supports multiple sample texts in different languages, including RTL and Japanese.
- Offers various typefaces from serif to monospace systems.
- Options for hanging punctuation, line spacing, and text-wrap modes like 'pretty'.
- Provides visual aids like blur (squint test), margin rulers, and uneven spaces display.
- Supports system, light, and dark appearance modes.
Lessons Learned Rewriting a Sticky Detector
2 months ago
- The article discusses converting a 2014 JavaScript demo that used scroll events to make a search input stick to the top, into a modern CSS-based solution.
- Key modern CSS techniques include using `position: sticky` for sticking elements, container queries with `scroll-state` for detecting stuck states, and anchor positioning for precise placement of elements like a hamburger menu.
- The old demo inefficiently used JavaScript scroll event listeners and jQuery, while the new approach eliminates JavaScript for better performance and leverages HTML elements like `<search>` for accessibility.
- Anchor positioning allows elements like a menu icon to be positioned relative to a named anchor element without traditional constraints, and SVG is recommended over emojis for icons for better markup and control.
Responsive Design Calculator
2 months ago
- The author discovered a minor bug where font size was slightly off due to rounding errors during conversion from px to rem units.
- The site’s layout evolved from fixed widths (450px/600px) for older monitors to a responsive design using breakpoints and smooth scaling.
- An interactive calculator was developed to automate CSS calculations, eliminating manual errors from earlier conversions.
- The layout formulas were updated to use modern CSS functions like min(), clamp(), and round() for integer widths and better responsiveness.
- The project’s initial bug fix was trivial, but the resulting automated system provides reusable formulas for future adaptive layouts.
Dark Mode with Web Standards
3 months ago
- Use the 'prefers-color-scheme' media query in CSS to respect OS settings, but also allow users to override with a per-site toggle.
- Set the default color scheme via a <meta> tag in HTML for faster loading, with values 'light', 'dark', or 'light dark' (reverting to OS).
- Update the color scheme dynamically with JavaScript and store user preferences in localStorage for persistence.
- The 'color-scheme' affects system colors, scrollbars, default element colors, iframes, and SVGs using 'light-dark()' or 'prefers-color-scheme'.
- There's a disconnect: 'prefers-color-scheme' reflects OS settings regardless of 'color-scheme', limiting its use for in-page toggles.
- Exceptions where 'color-scheme' affects 'prefers-color-scheme' include iframes and SVGs, but browser support varies (e.g., Safari has bugs).
- The 'light-dark()' function now supports gradients and images in modern browsers, allowing different backgrounds based on the color scheme.
- For non-color changes (like box-shadow to border), use CSS custom properties and style queries to detect dark mode, though native support is pending.
- Future proposals may allow overriding 'prefers-color-scheme' via JavaScript, but browser team opposition (e.g., Safari) exists.
Font-Family Recommendations
3 months ago
- Named fonts are not reliable due to loading issues, security blocks, or user preferences, so generic font families like sans-serif or serif are safer. Web fonts can fail to load, and remote fonts can be blocked by tools like uBlock Origin.
- Enumerating multiple system fonts is often unnecessary and can be worse than using a single generic family like monospace. Generic families will resolve to a suitable font, and lengthy font stacks like 'Menlo, Monaco, ...' are redundant and should be avoided.
- Using only generic font families, such as monospace, is recommended over web fonts to avoid performance and loading issues. For monospace, use 'monospace, monospace' to prevent font-size quirks, and avoid system-ui or ui-* families for content as they are designed for UI, not longform text.

System shock

Beej's Bit Bucket

CSS: Unavoidable Bad Parts

Preventing line breaks in <code> elements

Librrd Playground

Jitter

Show HN: Justif – Knuth-Plass justification and microtypography for the web

Lessons Learned Rewriting a Sticky Detector

Responsive Design Calculator

Dark Mode with Web Standards

Font-Family Recommendations