5 ms·
It's neat, but during my dabbling in web dev I've noticed that you can use basically <whatever>...</whatever> instead of divs, spans, sections, and it still mos
by rrr_oh_man 3y ago
It's neat, but during my dabbling in web dev I've noticed that you can use basically <whatever>...</whatever> instead of divs, spans, sections, and it still mostly just works.
- CM30 3y agoYeah, you could replace every single span on this page with almost any other HTML element and it'd work fine. But I guess onlylists or onlyh1s or onlybolds doesn't quite roll off the tongue as well.
- kevindamm 3y agoonly<em>s? onlysubs? onlyslots?
- kevindamm 3y agoonlymarquees
- rrr_oh_man 3y agoI honestly miss them
- bluefirebrand 3y agoAccessibility will be absolutely destroyed though
- xpl 3y agoI am pretty sure in the end accessibility will more likely be solved by some smart LLMs (with vision) interpreting arbitrary web pages on the user side, rather than by web developers coding it by hand. Because the latter obviously doesn't universally work. I would pay money for a browser plugin that restyles every web page to a single readable/accessible design that I like. Think "Reader Mode" on steroids (that could transform arbitrary GUIs, not just blog posts).
- interstice 3y agoInteresting idea, and I’d think mostly only limited by cost/speed per token currently
- edent 3y agoIn the end? Maybe. What about the people who can't use the web now?
- dartos 3y ago> I would pay money for a browser plugin that restyles every web page to a single readable/accessible design that I like. Sometimes designs you don’t like are intentional.
- btown 3y agoAs much as I work painstakingly to implement highly intentional design systems… the browser should be your “user agent.” If it can agentically interpret semi-structured data to help you, it’s entirely the user’s right to have the browser do that for them.
- DaiPlusPlus 3y agoExcept Chrome doesn’t support user-stylesheets - which is an outrage (even Internet Explorer supported them). I shouldn’t need to author my own Chrome extension just to set a minimum font-size on pages or disable fixed background images over remote-desktop.
- btown 3y agoStylus is quite effective for this! https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe...
- kevindamm 3y agoAdd your styles to Custom.css in the "User StyleSheets" folder of your profile path. No extension authoring needed.
- dartos 3y agoNot if you are good with ur aria tags.
- janosdebugs 3y agoThat's althe funny bit, despite aria, I found in testing that some tags still behave differently with screen readers.
- egeozcan 3y agoJust my personal experience: If anyone remembers how hard it was to make things render consistently across IE and Netscape, the current situation with different screen readers is 1000x harder. I mainly test with NVDA on the latest Firefox ESR on Windows 10. Something always breaks if I upgrade any part of this chain in my testing VM. Few months ago I spent many days to make abbreviations in a table header to be read correctly. I tried the abbr tag, abbr attribute, aria-label and many other possibilities and found a super hacky solution that involves hiding the expanded form with some css while exposing it to the screen reader. Then sometime after that I updated the Firefox. At the same day a colleague questioned why we needed all these hacks, and I wanted to show her how broken it was without my hack, but voila it had started working with the non-hacky, semantic way. I have many stories like this. I also do test with other configurations but just before releasing. VoiceOver (mac) is 80% there. JAWS Inspect is giving some colleagues headaches. None work 100% without breaking others, so the most popular stack decides how we implement things. When I saw this post, I thought perhaps doing everything with spans and adding necessary attributes like role would be easier. Well nobody is passing something like that through a code review :)
- yreg 3y agoThat's not true. Aria isn't a replacement for proper markup. Accessibility software is rather brittle even when you do everything right. It's a bad idea to push it.
- nsonha 3y agoAria should be the source of truth, the list of things is much simpler and straight forward than html tags. They ARE made for accessibility and accessibility only, unlike html which at worst treat accessibility as an after thought and at best just another overloaded function of the mark up.
- bazoom42 3y agoA custom name like <whatever> is not any worse than <span> - both are semantically neutral.
- ivanjermakov 3y agoAnd you often don't even need a closing tag
- extraduder_ire 3y agoAside from the spec wanting you to provide a schema, this is pretty much what xhtml aimed to do. The idea was that you could make the tags describe the content in them, and not have to rely on what's built into a common spec. HTML is and always was very error tolerant though.
- hgyjnbdet 3y agoSo XML in truth then?
- formerly_proven 3y agoI think you're thinking about XML + XSLT transforming the domain XML into XHTML in the browser.
- speedgoose 3y agoYou can also attach a CSS to a XML document to specify how to present it. No need to touch XSLT.
- SJC_Hacker 3y agoIts not simply styling, it goes beyond that. XML was/still intended to be the equivalent of JSON - just the data. With XSLT you created entirely new structure based on the underlying XML. The W3schools example is fairly decent https://www.w3schools.com/xml/xsl_intro.asp https://www.w3schools.com/xml/xsl_intro.asp Somehwhat similar to how component based JS frameworks work nowadays. Anyone who was using at a CSS equivalent was missing the point.
- TazeTSchnitzel 3y agoYou don't have to do it that way. You can embed arbitrary foreign (but appropriately namespaced) XML into an XHTML document and style it with CSS, untransformed. Or, as the sibling comment says, you can even avoid XHTML and style pure XML directly.
- MrVandemar 3y agoYou can even make up your own tags, according to specific criteria, and they will been seen as spans. Eg: <my-dalek>EX-TER-MIN-ATE</my-dalek> You can style them, including setting them as block level elements. Where it can make life a lot easier is when you have a large number of nested divs. If you give the div's distinct names, it makes debugging/editing the source easier, which is probably required if you have that many divs.
- rezonant 3y agoIt actually 100% works, just with the caveat that those elements receive display: contents by default.
- sprobertson 3y agoI think that is both the basic point of and minimizes the interesting point of the website - the actual element doesn't matter, it's the things you can do with them.
- dsego 3y agoYou can 100% do this, invent your own tags, no need for React to have custom component names. And it works for styling with CSS, just use your custom tag as selector instead of css class. And then the classes can be used for shared styles.
- 1f60c 3y agoWhen I was 12, I invented my own tag called <t> (I wanted something with no default styling but I didn't know how to do it).
- blowski 3y agoWhat year was that? The custom tags thing used to have a lot more problems than it does now.
- troupo 3y agoBrowsers have always been lenient towards errors in markup. Unknown elements would just be rendered as <p> or <span> (can't remember which). Much later this was codified in HTML 5: if a browser doesn't know an element, it will render it as basically a span (that is, inline element with default styling IIRC).
- quectophoton 3y agoAnd if you're lucky, your `<whatever>` might even get upgraded from "you're using the wrong tag for that purpose" to "now your tag is mostly correct" <i class="icon-cough"></i>.
- bazoom42 3y agoYes you can do that and it will work. But for future-proofing you should use tag names with a dash in them (like <foo-whatever>) to avoid colissions if html adds an official <whatever> element in the future. (The html standard promises to never add an element with a dash in its name)
- graypegg 3y agoJust to note the reasoning why they've promised that because I thought it was kinda interesting: https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name https://html.spec.whatwg.org/multipage/custom-elements.html#... Tag names with at least one hypen and two words either side are reserved for custom element use... with a few exceptions that I assume were part of the HTML/svg/mathml spec before the custom element registry. - annotation-xml - color-profile - font-face - font-face-src - font-face-uri - font-face-format - font-face-name - missing-glyph