Bilingual

Font-Family Recommendations
25 days 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.
Dark Mode with Web Standards
17 days 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.
Responsive Design Calculator
8 days 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.
Lessons Learned Rewriting a Sticky Detector
5 days 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.
Show HN: Justif – Knuth-Plass justification and microtypography for the web
4 days 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.

Hasty Briefsbeta

#css

Font-Family Recommendations

Dark Mode with Web Standards

Responsive Design Calculator

Lessons Learned Rewriting a Sticky Detector

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