Best of HTML — October 2025

  1. 1
    Article
    Avatar of newstackThe New Stack·31w

    CSS Finally Gets Inline Conditional Logic With New if() Function

    CSS now supports inline conditional logic through the new if() function in the 2025 W3C specification. This function allows developers to set different property values based on conditional tests using style queries, media queries, or feature queries. The syntax follows JavaScript's if-else pattern and can be used for tasks like theme switching, responsive design, and feature detection. Currently, Chrome and Edge support the function, while Safari and Firefox are still implementing it. This marks the first time CSS offers inline logic processing without requiring separate code blocks.

  2. 2
    Article
    Avatar of hnHacker News·30w

    I Built an App to Encourage My Kids to Invest — Just One HTML File

    A developer created a single-file HTML Progressive Web App to teach their children about investing and compound interest. The app, called D-investments, runs on an old smartphone mounted on the fridge and displays daily investment growth with configurable interest rates. It demonstrates how simple web technologies can solve real-world problems, turning financial education into an interactive, visual experience for kids.

  3. 3
    Article
    Avatar of lobstersLobsters·32w

    The Web Is About to Get Better for Everyone, Everywhere

    The European Accessibility Act, effective summer 2025, will require digital products in the EU to meet enforceable accessibility standards. This legislation will likely trigger a global upgrade in web accessibility, as companies typically build one version of their products rather than maintaining regional forks. Similar to GDPR's impact on privacy, the EAA will affect how teams design, build, and ship products, requiring semantic HTML, keyboard navigation, screen reader support, and inclusive design patterns. The improvements will spread through shared design systems, component libraries, and frameworks, benefiting developers worldwide and potentially influencing accessibility legislation in other regions.

  4. 4
    Article
    Avatar of hnHacker News·29w

    Just use a button

    Using `<div>` elements with click handlers instead of `<button>` elements creates accessibility problems for screen reader and keyboard users. While you can add `role="button"`, `tabindex`, and keyboard event listeners to make a `<div>` behave like a button, this recreates functionality that `<button>` provides natively. The `<button>` element automatically includes proper semantics, focusability, and keyboard interaction without additional code.

  5. 5
    Article
    Avatar of rubylaRUBYLAND·31w

    Announcing Attractive.js, a new JavaScript-free JavaScript library

    Attractive.js is a minimal JavaScript library that adds interactivity to websites using only HTML data attributes, requiring no JavaScript code. It supports actions like toggling classes, manipulating attributes, form submission, clipboard operations, and dialog handling through a simple data-action syntax. Designed as a lighter alternative to Stimulus for static sites and early-stage Rails apps, it works alongside Stimulus when more advanced functionality is needed. The library draws inspiration from Stimulus and Alpine but aims for maximum simplicity, making it ideal for quickly shipping Turbo-powered Rails applications with basic interactivity.

  6. 6
    Article
    Avatar of lobstersLobsters·31w

    Element: setHTML() method - Web APIs

    The setHTML() method is an experimental Web API that provides XSS-safe HTML parsing and sanitization. It parses HTML strings, removes unsafe elements and attributes (like script tags and onclick handlers), and inserts the sanitized content into the DOM. The method accepts optional sanitizer configurations but always strips XSS-unsafe entities regardless of configuration. It's designed as a secure alternative to innerHTML for handling untrusted HTML content.

  7. 7
    Article
    Avatar of christianheilmannChristian Heilmann·33w

    Abandonware of the web: do you know that there is an HTML tables API?

    HTML tables have a native JavaScript API that allows programmatic creation and manipulation of table elements without re-rendering the entire table. The API provides methods like insertRow() and insertCell() to build tables from data structures, and allows direct access to cells using array-like indexing. While the API has some quirks and limitations (like using -1 to append rows and no native TH element creation), it offers a more secure alternative to innerHTML string concatenation and could benefit from modernization similar to recent HTML form enhancements.

  8. 8
    Article
    Avatar of lonely_programmerLonely Programmer·32w

    div vs span

  9. 9
    Article
    Avatar of css_tricksCSS-Tricks·30w

    Pure CSS Tabs With Details, Grid, and Subgrid

    A modern approach to building tabbed interfaces using only HTML and CSS, leveraging the <details> element combined with CSS Grid and Subgrid. The tutorial walks through creating a three-column tab layout where each tab is a <details> element positioned using subgrid, with tab panels displayed in a second grid row. The solution uses the ::details-content pseudo-element for styling panel content and CSS custom properties for positioning tabs dynamically. The <details> element provides built-in accessibility features including keyboard navigation and screen reader support.

See all HTML archives