Not covered in Tapas’s article is the capture attribute. Combined with accept you can have a user on a mobile device immediately take a picture or video:
<!-- Capture photo using the front/selfie camera -->
<input type="file" accept="image/*" capture="user">
<!-- Capture photo using the back camera -->
<input type="file" accept="image/*" capture="environment">
I was planning on posting about the HTMHell Advent Calendar here on bram.us, but over at Smashing Magazine you a whole list of interesting Advent Calendars.
Once again, the web community has been busy with creating some fantastic advent calendars this year. As you’ll see, each and every one of these calendars are sure to cater for a daily dose of web design and development goodness with stellar articles, inspiring experiments, and even puzzles to solve.
Recently I had two occasions where I needed to create a simple one-page placeholder for a full website that’s still in the works. As a basis for my code I turned to Manuel Matuzović‘s HTML Boilerplate.
The other day I looked up colgroup on MDN […] the demo at the beginning of the page caught my attention. The author adds a class to the col element, which does nothing with the col element itself, at least not visually, because the element doesn’t get rendered on the page, but it applies the styles from the class to all the cells in the column.
I tried this on a table before and would swear it didn’t work back then. Perhaps I did something wrong, because it’s quite tricky as Chris details:
The “trick” at play here is partially the position: sticky; usage, but moreso to me, how you have to handle overlapping elements. A table cell that is sticky needs to have a background, because otherwise we’ll see overlapping content. It also needs proper z-index handling so that when it sticks in place, it’ll be on top of what it is supposed to be on top of.
Looking for a way to implement footnotes in HTML, Thomas Steiner experimented with using the <ruby> element.
The MDN docs describe the ruby element as follows.
“The HTML <ruby> element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.”
Hmm 🤔, this sounds like it could fit the footnotes use case.
The markup looks like this:
<ruby tabindex="0">some term<rt>content for the footnote</rt></ruby>
Using CSS Counters number indicators are injected, and using :target the footnotes are shown.
Not sure if this is how <ruby> should be used, but it’s quite a nice solution. Let’s hope this will open up the discussion again to adding elements to allow native footnotes in HTML.
This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough:
While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative.
Examples of both functional and editorial descriptions in the full post!