Now this is a fun pen! How many HTML tags can you remember? Stranded on 58 here, which is just over 50%. Perhaps if I think about it a bit more I can add a few extra to the list, but don’t think I’d get that much further though … Now don’t you go peeking …
Tag Archives: html
BlurHash — Low-res Blurred Placeholder Images Represented as Text
If you’re dealing with images it’s quite common to show a small placeholder while the image is loading. You could go with grey placeholders, but a low-res blurred version of the original is preferred. That way you can, in the example use case of a website, use the Blur Up technique once the image is …
Continue reading “BlurHash — Low-res Blurred Placeholder Images Represented as Text”
Semantically Identify a Heading Subtitle with ARIA role="doc-subtitle"
Over at CSS-Tricks, Chris takes a look at how to mark up a “Double Heading”, a common pattern where you have a big heading with a little one preceding/succeeding it (as pictured above). After going over a few options, the answer comes from a tweet by Steve Faulkner: use role="doc-subtitle" for the secondary heading. As …
Continue reading “Semantically Identify a Heading Subtitle with ARIA role="doc-subtitle"“
Checkboxland – Render anything as HTML checkboxes
Checkboxland is a JavaScript library for rendering anything as HTML checkboxes. You can use it to display animations, text, and arbitrary data. It also supports plugins, so you can build more powerful APIs on top of it. Heh. Can’t quite think of a reason when exactly to use this, but it’s fun nonetheless 😅 Checkboxland …
Continue reading “Checkboxland – Render anything as HTML checkboxes”
Limit the colors to choose from in <input type=”color”> with <datalist>
Christian Heilman: The input type colour supports the list attribute, which allows you to define a preset list of options. The colours need to be defined as hexadecimal colours. They can be defined as values or text inside the option tags, but the values take precedence. Pictured at the top of this post is how …
Continue reading “Limit the colors to choose from in <input type=”color”> with <datalist>“
Guidelines for text fields design
Text fields are probably one of the most used interface components; contact forms, payment details, account creation, lead generation. Users definitely need to interact with text fields when using your product. The purpose of this post is to highlight some of the key guidelines which I follow when it comes to designing better text fields. …
Styling Ordered Lists with CSS Counters
Using CSS Counters, Josh W Comeau injects his own number in ordered lists. That way he can style the number itself separately. ol li { counter-increment: muffins; } ol li:before { content: counter(muffins) ". "; color: hotpink; } ol { list-style: none; counter-reset: muffins; } Apart from styling, I find this technique come in handy …
Methods for assigning an accessible name to a form control
Adrian Roselli: Too often folks will grab ARIA first to provide an accessible name for a thing. Or they may sprinkle hidden content around a form. In most cases the impact of those decisions is unknown. The assumption that they do the same thing, give the same output to all users, is wrong. In short, …
Continue reading “Methods for assigning an accessible name to a form control”
<ol>‘s start and reversed attributes (and more)
#HTML tip for today: <ol> element has `start` and `reversed` attributes! Some examples where it's useful:`start` → paginated results`reversed` → "top 10 best … " lists pic.twitter.com/vkh88h2zGV — Tomek Sułkowski (@sulco) March 20, 2020 Handy for those end-of-year lists 😉 ~ Apart from overriding the list style using CSS’s list-style-type (which you should set it …
Continue reading “<ol>‘s start and reversed attributes (and more)”
Embracing Modern Image Formats
Josh W. Comeau, on embracing modern image formats to ship less bytes to browsers. As not all browsers understand all image formats (Apple/Safari for example doesn’t support .webp, an image format developed by Google) he resides to the picture element with various sources set. <picture> <source srcset="/images/cereal-box.webp" type="image/webp" /> <source srcset="/images/cereal-box.jp2" type="image/jp2" /> <img src="/images/cereal-box.jxr" …