Tagged: html

  • Posted on

    HTML and Typescript.

    Mandy Michael uses a brilliant analogy to explain why developers must get to know the HTML elements available to them and use the appropriate one for their content.

    In TypeScript, we have the concept of an any type. When you assign a type of any it means the content can be anything. […] But if everything is typed as any then you lose the benefits of the language.

    This is the same with HTML. If you use the <div> everywhere, you aren’t making the most of language. Because of this it’s important that you actively choose what the right element is and don’t just use the default <div>.

    This reminded me of the following quote by Jen Simmons from their HTML course:

    HTML syntax itself is fairly simple. The trickier part is knowing which tags to use when.

    (Discovered via Jeremy Keith)

  • Posted on

    Safari drops support for the theme-color meta tag

    The <meta name="theme-color"> tag is no longer supported in Safari 26 on macOS and iOS.

    If a fixed or sticky element touches the top or bottom edge of the window, then and only then, Safari extends that element’s background color into the corresponding top or bottom bar. Otherwise, on iOS, the bars remain translucent and have no solid color background.

    As Wenson Hseih explained on WebKit Bugzilla:

    A solid background color extension (“top bar tint”) is only needed in cases where there’s a viewport-constrained (fixed or sticky) element near one of the edges of the viewport that borders an obscured content inset (such as the top toolbar on macOS, or compact tab bar on iOS), in order to avoid a gap above or below fixed elements in the page that would otherwise appear when scrolling. This color extension behavior is more critical on iPhone, where there’s a much “softer” blur effect underneath the browser UI (and so more of the page underneath is otherwise directly visible).

  • Posted on

    I keep forgetting, but the alt attribute of the <img> element is not just useful for users who are visually impaired. It is also useful when the image is not displayed in the browser for whatever reason. For example: the src attribute does not contain a valid path to an image.

  • Posted on

    I was reading Manuel Matuzovic’s article on meta theme color and came across this snippet:

    index.html
    <style>
      :root {
        --theme: blue;
      }
    </style>
    <meta name="theme-color" content="var(--theme)" />

    I wish it was possible to access custom properties outside the <style> tag in the <head>. It would keep things DRY.