61–70 of 136 posts
Disappointed to see or merely mentioned but not used on that page, seemed like a serious omission. Based on my tests just now, no longer blinks in today’s browsers but still scrolls happily.
Most people insist on only using one element, which is the element of last resort, according to MDN. This is our friend, the . The only use case I have for is in a details/summary where there is no CSS to select the contents of a element, excluding the . Does this mean I use instead of , as a 'direct replacement'? Nope. When using CSS grid, there is no need for wrappers around everything. I do like to use the full HT…
This is a great approach. Just to add to it, you can also use custom elements in lieu of classes, such as: ... Any tag with a hyphen is considered a custom element, which is completely valid HTML -- even without defining the element in JS. This gives you a more descriptive `div`, and then instead of classes like `product-primary`, you can use semantic attributes, like ` `. In combination with CSS nesting, you can get…
The element says "This is a modal dialog displayed using just HTML." but that's a bit misleading because the dialog opens using JavaScript `document.getElementById('my-dialog').showModal()` in the onclick attribute of the relevant button.
Which is strange because you absolutely can open dialogs without javascript with the popover attribute https://developer.mozilla.org/en-US/docs/Web/API/Popover_API...
Most people insist on only using one element, which is the element of last resort, according to MDN. This is our friend, the . The only use case I have for is in a details/summary where there is no CSS to select the contents of a element, excluding the . Does this mean I use instead of , as a 'direct replacement'? Nope. When using CSS grid, there is no need for wrappers around everything. I do like to use the full HT…
This is a great approach. Just to add to it, you can also use custom elements in lieu of classes, such as: ... Any tag with a hyphen is considered a custom element, which is completely valid HTML -- even without defining the element in JS. This gives you a more descriptive `div`, and then instead of classes like `product-primary`, you can use semantic attributes, like ` `. In combination with CSS nesting, you can get…
I quite like styling the attributes, which gets me half-way to what you describe. In ecommerce we have all kinds of extra attributes for marking up products, although you can ditch that and just have a chunk of JSON+LD these days.
What happens is that I end up with great document structure and human readable/writable HTML and no CSS preprocessor things needed. However, sometimes I have things such as lots of sections containing lots of articles that contain lots of sections. I might take your tip to write '' for those top-level sections.
When styling the elements, you tend to use the full range of elements, so a list could be a , or even if it eventually just gets styled as an . Really, semantics needs to come first, even if the presentation is just normal stuff.
I keep finding code examples where people are doing more than just using divs, which means that I am feeling more confident flexing the whole HTML element LEGO set.
Earlier quoted context omitted.
Which is strange because you absolutely can open dialogs without javascript with the popover attribute https://developer.mozilla.org/en-US/docs/Web/API/Popover_API...
The Popover API only makes non-modal popups.
> Popovers created using the Popover API are always non-modal. If you want to create a modal popover, a element is the right way to go.
> You can turn a element into a popover ( is perfectly valid) if you want to combine popover control with dialog semantics.
Earlier quoted context omitted.
do you have an example?
Not to hand, for sharing here, but just try it with something like your CV, in neat HTML. Set yourself some rules to not use classes (for the lols, not out of ideological hatred) or divs (there is always a better element). If you can't do it, there is probably more work to do with your document structure. Also try and always have a h1-h6 heading in your articles, sections, asides and even navs, at the top. Headings s…
(e.g., a toolbar with with left- and right- justified elements, among which is an expanding searchbox).
Earlier quoted context omitted.
This is a great approach. Just to add to it, you can also use custom elements in lieu of classes, such as: ... Any tag with a hyphen is considered a custom element, which is completely valid HTML -- even without defining the element in JS. This gives you a more descriptive `div`, and then instead of classes like `product-primary`, you can use semantic attributes, like ` `. In combination with CSS nesting, you can get…
you don't need a hyphen for a custom tag ; as far as i know the hyphen makes it an inline element while no hyphen makes it a block
[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/po...
According to MDN [1] there is a element but hell if I know what it does. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/po...