Aspects of modern HTML/CSS you may not be familiar with
lyra.horse
lyra.horse
Unfortunately the preprocessor languages we have just add even more half-baked ideas on top of the half-baked ideas already in CSS, according to the principle that syntax sugar = good.
I haven't seen anything out there that provides an alternative but it does seem like CSS has almost added enough features you could actually build something that works. Alternatively it could be done through higher level abstractions built on something like React: <Flex>, <Grid> etc.
that said i do like to still use classes like "btn" to consolidate a bunch of styles. I think it was a mistake for TW devs to discourage that pattern for so long.
CSS2 included limited layout, but support in popular broswers lagged for so long that practically nobody learned the standard, just the vibe styling voodoo to get certain browsers to kinda partially work.
from the article is talking about people like you, who refuse to learn something properly but have the arrogance to think they know better.
There’s nothing more arrogant than doing something wrong/badly and then blaming the tool for the outcome and not yourself.
Here's a better explanation of the hostility towards CSS.
Nested flexbox had bugs in IE11, which wasn't end of lifed until 2022. The nested CSS in the article came out in December 2023.
CSS first came out in 1996.
The current state is much improved, but don't pretend there wasn't a solid 20+ years of sucking before that.
how is I hate CSS because IE was poorly maintained a serious argument?
on edit: I know it was in WD in 2009 but I'm pretty sure it was around 2013 that people started playing with it. I think it started being popular in 2014-2015.
“It’s not MY fault, it’s a browser no has used in 10 years fault! I can do no wrong!”
Ok
Perhaps because we can have different styles of layout, it fits with CSS better than you say. Carefully designed padding, margins and negative space is both a style and layout consideration.
Containers contain styles, but the container's relationship with other containers may tie with presentation such as border thickness, colour, shadows, and let's not forget animation and interaction effects on containers. Maintaining control of these aspects in one place makes good sense to me.
A series of modules that are bolted on top of existing properties without actually improving on them, simply "well, here's another way of doing the same thing" often in ways contradicting each other (see the way the box model works in "display" vs "flex" layout) or just slightly diverging in ways that make extremely hard to debug them (e.g. how gap works in "flex" vs "grid" layouts[1]).
The awkward point-based cascading system means that once a layout is written it's basically frozen, unless you use some convoluted native or js-based encapsulation systems which once in a while gets leaky and, who knows, your component topbar font-weight mysteriously goes from "thin" to "extrabold" or your mobile menu appears even on your desktop breakpoints.
Many years ago I did a very deep dive into the CSS specs as I was researching for a new implementation and it struck me as well designed for its purpose of separating style from the semantics of markup.
HTTP can stay, and HTML/CSS can stay just like PDFs for delivering a document, but when it comes to UI components, we should be able to have things as fast and performant as e.g. RedLang / Processing / Enlightenment DR17 / etc without every developer having to shovel megabytes of shim-ware down to the client.
I.e, the GP is trying to argue one thing and you’re kind of going down a different tangent.
Nobody came up with a better alternative though (apart from the many dialects that transpile to CSS again).
Specificity is really just
* ids take priority * the highest number of specified classes, and if there’s a tie it’s the first one specified * the highest number of types
The only problem is that most paths in frontend development say “slap a class on an element” and call it a day but you do need to be intentional about it and only specify what you need
[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
When it comes down to it, making a great looking and maintainable page is just as much work and planning as building a good backend codebase. Neither one just happens.
Lots of "real" devs treat HTML with similar "I don't need to really learn this toy markup" kind of attitude. The worst CSS issues I've ever had to deal with were often caused by horrible markup that was impossible to consistently style.
Basic stuff like how to make a good `<form>`. Putting `<label>` elements next to your `<input>` elements, or making sure the `for` and `ID` attributes are set. Hell, even using `<label>` instead of some `<span>` they threw a bunch of random framework classes on.
If everyone is working from the same spec/reference, it's fine, and you get consistent, reliable results.
When devs have to stumble around in the dark and end up reinventing the wheel every few months, that's when things go badly.
That's as bad a complaint as the one about cascading.
Your rules should be close to the object that uses them. It's really bad that CSS only supports global rules, and that is not a fault of the developers writing those rules.
Same problem with Javascript. Here we are compiling Typescript down into it... and running JS on the server with Node in order to avoid the classic impedance mismatch we all had back in the day writing backends in PHP etc.
Feels like the real solution would be to allow browsers to become more flexible with language implementations instead so we can make more progress. WASM might be the ticket there?
Cascading is a nice feature for documents, that present data in the same way over and over. It not good for anything interactive. A lot of modern styling techniques are all about making CSS _not_ cascade. UI components (which is the majority of modern frontend dev) is basically a pre-requisite to achieve that.
The layout system is a bit of a separate discussion, and it is a mess yes, but mostly for backwards compatibility. If we could live in a world where all layout is default flexbox or grid and never mix inline with non-inline in the same container it would work out just fine. In fact that is _exactly_ how it works in React Native and it doesn't cause problems there. Styling in React Native also doesn't cascade which also makes it a lot easier to manage.
Anyone who ever did any work on UI development knows very well that styling and layout are coupled and interdependent. I mean, think about it. Text string length, text size, text overflowing/breaking/clipping, margins, etc. You change border sizes/padding/spacing and the space left for child content changes as well. How exactly do you uncouple something that's fundamentally coupled?
The dream of CSS was that you could decouple styling from semantics. Your HTML would tell you what the page meant, and then your CSS would let you present it in whatever format was prettiest, and you could swap out CSS to let different users view it differently. But in practice, what happened was that the page ended up meaning nothing - it was just an app, a way for the user to accomplish a task, so instead of <h1> through <h6> and <p> and <em> and <cite>, everything is a <div>. The very concept of CSS was flawed, because we still thought of websites as documents at the time it was invented, rather than as an app platform.
That's perhaps why newer reactive frameworks like React or Jetpack Compose ditch this separation. The style in React is to just include CSS inline on the components. In Compose, you have Modifiers that let you specify the styling as explicit attributes on the component. They admit that they're building a UI framework, not a document overlay, and get rid of the content/presentation separation as a result. It's all presentation.
What doesn't really exist is the excitement about the web as a publishing platform. Those of us who still write CSS for a living probably do so in the context of a webapp, a product that's trying to help a user accomplish a task. We usually work with other developers, and writing CSS like you do on CSS Zen Garden would probably get you fired. If you are an indie publisher maintaining your own website where you can actually control the CSS - get ready for spam, and hackers, and bitcoin miners, and people using your server as a launchpad to do illegal things and get you blamed for it!
Social media won, and it's social media like Facebook or TikTok or Reddit where you have zero control over presentation, not even social media like MySpace or LiveJournal where you could do cool things with CSS.
but you have to separate the specific properties (float) and the semantics of the language
the selector system is incredible, in a way i can’t quite describe why but it feels similar to programming in prolog
inheritance is kind of stupid for most things yes, but `all: initial` is a easy fix / debug
to me the part i love is the debugger (dev tools) and the ability to plop down code where ever and it just works, code organization is just writing good selectors
unfortunately i don’t get to do this professionally so the largest css files i work with are 1000 lines, and usually no shared libs, but i find it extremely fun to work with
At the same time, I want to emphasize more strongly the flip side that I think you don't at but don't go much I to: I do find that writing less code & using the platform is enormously valuable! Doing less & letting the browser do the thing is a very nice win.
If only they would do it nice and consistently, I would agree. Sadly they don't. On one plattform you get sliders in this color who pop in when the mouse moves there, on another you have fixed size sliders of a different color and style. Impossible to make a coherent style like this.
for any sites that do need js, i simply enable it for them from the extension, so it never gets in the way with sites i use regularly
it's pretty nice for performance/battery and security
have you ever tried living with noscript for over a week? i feel like your perspective could be a bit mislead, because i felt the exact same way as you before i started using noscript
disclaimer: i'm the author of the blogpost
Genuine question though: you just run a ton of apps instead, right? Windows apps, iOS apps, whatever. Right? Because you still want to use (and not just "look at") Facebook or WhatsApp or BSky or Drive or CoD:BO6 or... everything. And all that stuff runs in an environment with the same privacy-compromising power (generally much more dangerous, frankly).
I just don't see a situation where "use noscript" doesn't really just mean "use your phone so you don't have to use your browser". I mean, why bother? You're not winning anything.
(Quite frankly most of the people I see in this argument eventually admit this straight up: "no javascript" really means "no Google" to them, and their goal isn't privacy at all except as a proxy thing; it's the destruction of the World Wide Web as a platform in favor of Apple's offerings.)
for sites such as facebook, i don't really use them that often, so i only run js on them when i feel like consenting to it
yes, i use programs/apps, but attack surface and threat models aren't binary, so it's still better to make things more secure
But again, the point is that market decisions aren't microeconomic. The world where everyone uses noscript by default is a world where no one builds web apps anymore (because the platform sucks by default) and everyone uses native apps from whoever the dominant vendor happens to be. And that's worse (much worse, by basically every metric, including privacy and security) and not better.
Your logic only works if you're a parasite: you can use noscript to "protect" yourself only if most people don't.
Separately, we already live in a world where people tend to pick "native" apps (e.g. Discord, Slack) that are just wrappers around the webapp, and on the phone you have similar behavior where people often prefer the "native" app (e.g. twitter/X) over the mobile web version. Despite this asymmetry, web apps continue to be built, and they would continue even if everyone used noscript.
and like, noscript doesn't mean you can't run javascript - it just means you have to consent to it, just like it was in the past with flash and java applets
your argument kind of assumes noscript users never run javascript, which is false
Of course not. You're a parasite because if everyone had your "personal threat model"[1] it would kill the platform you're using and you wouldn't even have the option of noscript. I think the metaphor is apt and I stand by it.
[1] FWIW, this conflation of legitimate security jargon with what amounts to wanting more settings tunables in your app is sort of a bad smell. It seems insincere, honestly.
seriously though, some of us have been using the web longer than JS has existed, and it works fine without it.
i personally just updated my purpose-built (for SEO and other non-JS contexts) router for React, which now lets one curl a page and you can see all the text contents you want and even has low quality image placeholders. so you can view the whole page with no-JS. it really isn't very hard to support!
For many people that's true and good luck to them.
For others, myself included, I can't think of anything worse online than being locked into mega corporations such as Google and Facebook. I don't have a Google or Facebook account and I de-Google my Android phone by either disabling or removing all Goolge apps (there are pleanty of alternatives).
I'd bet that if you did a survey you'd find that those who can live without scripts are also those who can essentially live without Social Media and or Google apps. However, for many, the imperatives of Social Media are so strong that no argument would ever convince them to go script-free.
In essence, here we're dealing with diametrically opposite worldviews and there's little point or value in trying to reconcile them.
I visit new websites all the time because of HN and Reddit, and without JavaScript many sites just don't work or look too broken for me to want to read anything. Unless we collectively decide to stop using buttons instead of anchors for navigation and stop having external, unrelated JavaScript blocking the actual site (that, sometimes funny enough, doesn't require JavaScript to function), it's not going to get any better.
I went through a phase where I think JavaScript is bad and have used CSS instead of JavaScript for a lot of things (mostly because I enjoy writing CSS). The thing is if you have ever tried developing any substantial and moderately complex feature for an actual product with CSS instead of JavaScript, while keeping them readable, maintainable and scalable, you will realize that they are good for different things and talking about them in a mutually exclusive way isn't helpful.
Both CSS and JavaScript are constantly evolving, I agree with you that there are now things that we should do with CSS instead of JavaScript and increasingly more so.
I have been living without Javascript, and without a mouse, for over 20 years
When I began using the web, Javascript did not exist
Extracting text for reading and downloading files keeps getting easier every year
I generally avoid using a browser to make HTTP requests; I sometimes use a text-only browser to read saved HTML (offline)
As I implied in my earlier post most users these days don't realize the advantages of turning off JS. Trouble is, most browser manufacturers make it difficult to disable JS, either there's no switch in the settings or it's buried so deep it's essentially dysfunctional. Here I'd especially single out Mozilla with Firefox, one could once easily disable JS but the function was removed I suspect after pressure from Google—as you would know without JS ads are almost a non event.
On Android I use Privacy Browser which makes it dead easy to turn JS off and on, and on Windows and Linux it's Pale Moon with a plugin that provides a one-click switch.
Seems to me too little is made of these advantages in tech sites such as HN—although that's not surprising given that many here make a living from JS programming and are paid by companies who financially benefit from sending mega-sized JS-loaded pages to web users.
The other motivation mentioned is performance. But they don’t belabor the whole motivation thing anyway. IMO that’s a good, focusing on showing off the tech seems more productive anyway.
It's not JavaScript that I'm against but the many abuses that websites inflict on users—privacy violations, pages of many tens of megabytes long but which only contain some 10k or so of text, the incredibility slow page load times, etc., etc.
As far as I'm concerned CSS is capable of just about anything I require of a webpage.
It seems a shame that not more users are aware of browsing sans JS with a button to turn it on and off. After experiencing the advantages it's quickly habit-forming. The increase in speed of page loads alone justifies killing JS.
correct, nearly all dont
edit: IE javascript was probably responsible for at least half a dozen times their system has been ruined, and they know what tracking is.
What does this mean?
If 99.9% percent of users don't know what JS is, that means even a majority of professional software developers don't know what it is.
Deep down inside, however, I miss DSSSL.
At the same time doing the simplest imaginable layout was a headache. I've done it, and it was interesting as in, this is a challenge and I am taking it head on, but it never should've been a challenge. Things have improved exponentially here, but it should've been the idea all along. Not how to cascade rules.
All other criticism, the syntax etc. is nitpicky and not important. As long as it's allowing you to do something useful without much fuss, I am ok with any syntax. But it didn't and it never did. Making a webpage layout should not be a full time job.
And since documents "fit" trees way more often than not; I'd say CSS is a good fit.
There used to be DSSSL and JSS. The former came out if the SGML world, like HTML itself, and it was kind if the obvious solution to adapt it for the web. The latter used JavaScript syntax and was Netscape's favourite, which also made sense, them being JavaScript's inventors.
(A maybe interesting aside to this story is that JavaScript actually predates CSS, at least if we go by the dates each shipped in a browser.)
How dare people use CSS without learning in-depth all 20+ specifications! It's an outrage!
When people have problems using a tool, you should look at the tool rather than blaming the people. People aren't going to change. You don't tell people to be more careful using a bandsaw; you install safety features.
I'm a big believer in learning new stuff, when that stuff has lasting value. However it is far more efficient to fix things, a one time cost that benefits everyone, than to ask everyone to learn the quirks of a tool, a cost that is paid every time someone new comes along.
JS is in general better because by the time it came out people knew what to expect from a scripting language.
CSS didn't really have a lot of earlier styling and layout languages to copy. Also the original vision was much more limited.
Is this about CSS or JS (and things like Node)?
Is strange reaction to:
> ... then have a strong opinion after they were forced to use it for a day.
There is not problem with using something without understanding all complex rules. Point is about forming strong opinion based on superficial knowledge.
People are not humble these days.
How about we do both? We expect people to be able to use the tools, you know, properly, and make sure the tools are well-designed?
But further more, with flex and grids you can handle it even better. Without any hack. This doesn't sound like the most complex thing I've seen done with CSS.
CSS has a lot of weirdness but I feel like it's been following the trajectory of Javascript toward becoming decent language. Flexbox and the :has selector, and now nesting, cover a lot of the pain points I've had over the years.
> n-th child variable
See sibiling-index() and sibling-count() https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-ind...
> Reusable blocks
See @function and @mixin draft spec, https://drafts.csswg.org/css-mixins-1/ and https://css-tricks.com/functions-in-css/
Both are available in chrome already.
I think that if you want to follow WAI-ARIA practices, the aria-selected, tabindex and aria-controls need to be updated via JS when the active tab changes? I'd love to be wrong about that.
Accessibility is often an afterthought. And, sometimes there's an assumption that by working with HTML/CSS directly, accessibility comes built in. Just Something to keep in mind when choosing an approach.
[0]: https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10
I am aware that people who read the blog might base parts of their websites on my examples, so I definitely want to make sure they're accessible as to not cause a negative ripple effect on the web.
I don't have a background in accessibility, but I try to do the best I can. I try out what I make with various accessibility tools (e.g. keyboard navigation, screenreaders), and also read up on how things should be handled.
For the radio tabs specifically - they are keyboard navigable, work with screenreaders, and follow the tabbing to content practice mentioned in the WAI-ARIA example[0].
[0] https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-...
Part of the reason for mentioning the radio-tabs is because I was working on my own implementation for a personal project a few weeks ago. My goal was specifically using the role="tab"/role="tabpanel" pattern, but my read of the guidance left me feeling like I was trapped with using JS to set those. Since it was timeboxed, I bailed out to augmenting it with JS for and moved on.
My hope was maybe somebody on HN with more of a background on accessibility could interject some thoughts here.
you're calling the post un-accessible and telling people to not use it as a source - i'd like to know why you think that, and if there's any way to improve the accessibility
You can also view these issues using googles hosted version of lighthouse (chromes checking tools for speed and accessibility) at https://pagespeed.web.dev/analysis/https-lyra-horse-blog-202...
[1]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/G...
ps. I love the post in general, I'm a big fan of css over javascript!
i am aware that the link color specifically is not ideal and i have been playing around with designs that feel similar while having better contrast - but your comment seemed to call the entire site un-accessible, so i was wondering if there's anything else that stood out and that could be improved
Focus management:
Focus scopes and restoring focus requires JavaScript. Complex UI components like combo box, grids, and trees require dynamically adjusting tab index and focus. Combo Box requires managing accessibility tree focus separately from DOM focus. Modals implementing focus scopes and restoring focus scopes requires JavaScript.
Key controls:
The ARIA APG patterns call for differences in tab and arrow key control from what the browser would supply. Patterns that involve list of groups use tab to navigate between groups and arrows to navigate within groups.
Personally, I don't have my access to my normal computer/environment at the moment, so I've just been trying to go by the spec when necessary and hope for the best until I do.
I know like 10-15 different languages, and CSS is by far the hardest to read and understand. It's easier to understand x86 assembly than CSS. CSS is basically pre-tokenized input that drives a renderer, but they sort of went halfway and didn't really make it real tokens or really human-writable.
I'd say that it should take the place of ASN.1 in the RFCs as an example of "what not to do."
CSS is hard to know, even if you know 15 languages.
I can understand many programming languages and write in a subset of many of their features, but I wouldn't claim to know them. That would require a monumental amount of day to day effort, in my opinion (see https://en.wikipedia.org/wiki/Illusion_of_explanatory_depth).
To me, the best way to understand CSS is to evaluate it after rendering, and I have been writing it for decades.
There's no use comparing CSS and assembly. It betrays a shallow understanding of CSS. Points to ponder:
- Assembly is superlatively imperative while CSS is the opposite. The difference can be jarring for some. It's commonly felt in day-to-day frontend work that switching to CSS (declarative) from almost anything else (imperative) -- JavaScript, PHP, etc. -- requires a significant mental shift, though it does get easier with experience.
- Lot of the vocabulary and concepts used in CSS come from outside the computing world, namely design and publishing. It's somehow a rarely shared factoid, but it's a hint at how too far away from Kansas we are to be making fair comparisons.
- A pervasive mistake that coders make (and unfortunately a lot of CSS teaching material out there too) is to approach CSS as a set of explicit, atomic instructions -- a fair coder-y assumption, but a bad mental model that leads to frustration. Understand that these instructions can affect one another; some switch entire layout algorithms[0] in a given scope, changing how other instructions behave (predictably).
[0] https://www.joshwcomeau.com/css/understanding-layout-algorit...
I do wish we would start to move further towards a sane set of front-end application (logic) technologies (I don't think the current leader, Typescript NextJS is it)
But I do appreciate that CSS is starting to feel a lot more sane these days.
For testing there are extensions which allow overriding the browser’s scheme (for Firefox anyway).
Yes, local storage is crucial functionality. I don't get people who disable JS, but I suppose if they have a bunch of sites they whitelist it's less painful... but then they must trust those sites all the time? How do they know if those sites haven't installed new scary scripts?
Perhaps one possible solution is for browsers to offer a setting to enable all the "safe" functionality of javascript such as button events for fancy carousels, but block the stuff that causes anxiety. I suppose then we'd all argue about what aspects are safe vs scary.
If your intention is to adopt your styles slightly to user preferences then there are media queries.
Media queries are really nice though. Being able to provide a night mode alternative without even asking the user, assuming they've set the OS to their preference, is really seamless.
Yes, I also think they should. What I wondered, is this behaviour prescribed somewhere? Even if it were, form content is retained even across randomly typing in a different URL and navigating back, form submission and even across real crashes just seconds after I typed the letter. This is really nice and I don't think it is mandated. This is the stuff User Agents should be compete with, not ways to get data from the User to a surveillance company.
> Being able to provide a night mode alternative without even asking the user, assuming they've set the OS to their preference, is really seamless.
Yes, that's nice and how every thing in a UI should be. It helps both the programmer and the user in efficient and controllable usage.
I also love https://lyra.horse/arrupted/ I've made some pretty cool pieces with it in the past, so it was really cool to see a domain I recognize on the front page today!
- Falling confetti animation
- Alert with functional close icon
- Dismissing alert also dismisses confetti
- Tabs also work (but unlike example in TFA, requires page load from server...)
- (The page is enhanced with JS; the JS version is smoother and includes fancier confetti)
CSS will not render maps ;)
It could with CSS+SVG. You still need to control navigation somehow.
Given that HTML+CSS is really damn powerful as this post makes clear, how do other UI toolkits compare? I've always wanted to do more with Qt, but probably it won't come near HTML+CSS in terms of functionality and flexibility?
To do these things I use Tailwind which makes it easier for me to change and see what is happening. You can do so many things with just CSS. Dropdowns, animated sidebar menus, toggled areas, file-upload areas with resets to previous version or removing an upload, modals with and without backdrops, etc, etc.
I hardly use any JavaScript anymore and it is great.
Please don't waste my battery with animations running at 240 Hz, in CSS or Javascript...
RIP any semblance of using meaningful tags for machine readability I guess.
if an element that semantically fits your needs already exists you don't need to make up an element in the first place
Saying that, if it just doesn't grok in someone else's head, I can't fault them for that, but my opinion isn't really going to shift... regardless of the superlative-riddled doom-saying.
So yeah you don't need JavaScript in the sense that you never needed it if your site isn't doing things that require it..
Here's a thought. Build a WYSISYG tool like that. HTML/CSS only. Round trip; that is; it reads its own HTML/CSS and works on that, rather than using some separately stored representation.
If you want to use Javascript with this, it has to be inside a manually edited IFRAME or FRAME. If you have Javascript, it's probably for interacting with a server or doing something graphical. Or, more likely, for ads, tracking, and such. Not for layout.
Recent survey of what people use to learn CSS:
https://2025.stateofcss.com/en-US/resources/
CSS Tricks article on this:
https://css-tricks.com/how-to-keep-up-with-new-css-features/
I barely started the article and CSS is already causing problems.
GUIs are successful when they follow visual and behaviorial standards. With everything that CSS and JS can do, every website becomes an exercise in discovery just to be able to use it for its intended purpose.
Wouldn't that be a design or HCI issue, not something innate to a language? What is a behavioral standard?
A behavioral standard would be that scrolling always works by sliding the scroll bar or using the arrow or page-down keys.
Or that the back button takes you to the previous page.
Just two examples.
Many sites break these and you have to discover what they replaced them with.
Original title chosen by author:
"You no longer need Javascript"
Changed HN title: Aspects of modern HTML/CSS you may not be familiar with
As the author, I don't really have a problem with either title :).
Externally, the title is meant to be augmented by the summary (as seen in the original HN title), and I much prefer that over just the title alone by itself. I usually make my titles fun and catchy, and a part of the story I want to tell, while the summary's there to provide a more neutral and accurate overview of the post before people click on it.
The post's story doesn't make sense with the changed title, but that's not an issue because if people click on the link they'll see the original title on the website. I don't mind the title of an external link being more descriptive.
Even if you write code for it, you should be able to write code in a way that express your high level thinking, something similar to constrain layout in mobile dev. CSS has 4 levels of overlapping features so far and every new layout model comes out are slightly better but still a little bit off. The newer features like variables have bolted-on syntax that looks like garbage, nobody understand CSS grammar anyway (does it even have one?)
Given how convoluted CSS is despite how little it has to do, I consider it a poorly designed programming language, if you can call it that.
Remember that designing for the web is not like designing for print, where the dimensions of your canvas, and the amount and nature of your content, are known quantities. A web page is expected to accommodate every possible device, agent and viewport -- watches, phones, tablets, laptops, desktops, TVs, screen readers, ebook readers, etc. * portrait and landscape orientations * browser window sizes -- and content that can change by the minute and whose size is unknown until all of it has arrived on the device.
Think about all these conditionals and variables, and how much instruction you need to provide, efficiently, for making it all look as good as possible, to the browser/agent. Doesn't all this seem like the necessary purview of a domain-specific programming language?
(if not, what are the blockers?)
can you expand on this? why expensive..?
i figured Visa and company would mandate some JS monstrosity. However ive had some really ancient weird credit card online forms in Asia that i suspect have no JS
(In practice, at the lower levels compliance is not typically validated, and I wouldn’t be surprised if less than 1% of e-commerce merchants were actually fully compliant even at SAQ A.)
I find vw very useful for a scaling pixel-perfect mobile portrait view that looks identical whether your mobile is 320px or 440px viewport width.
if you're going to disagree with something, please at least read it first
I generally avoid vh, and rely more on calc and vw to calculate any height that needs cropping, padding or scaling.
For example dynamically equalising the height of boxes with unequal content - used to be something you did need JavaScript for.
Another is setting widths, heights and gaps using a css grid to create responsive mosaic image layouts.
Explain float: clear?
Does that have anything to do with display: flow-root?
And white-space is not actually whitespace?
And when does vertical-align work vs not?
---
^ That is all CSS (and not particularly edgy CSS, except for flow-root).
So....yes, CSS is really that hard. Unless you use the subset of CSS that you have decided to learn + use. Not unlike C++.
Personally -- and I'm no web dev, so I probably don't count -- I think CSS is hard (maybe more irritating than hard, but in any case I wouldn't call it easy). In large part because the syntax is ugly, but also because it just doesn't "mesh" with me. If I'm reading it or writing it, I always feel like I'm having to decode it. But I can easily and happily work with some programming languages that most devs would cross the street to avoid.
Maybe that's also why some people are attracted to being web devs and others aren't?
As a user, nothing would thrill me more than if web pages just stopped using JS, though, so I am very happy that there is a feasible alternative to doing that that web devs could enjoy!
No that often isn't the case. What is usually the case is that people don't bother the learning the basics. CSS is very easy. You can literally mess about with it on the fly in the browser and instantly see the result.
It is easier now than it has ever been. Since all the browsers for the most part implement the standards properly. Safari is the only standout and all the issues with that are well known.
> In large part because the syntax is ugly, but also because it just doesn't "mesh" with me. If I'm reading it or writing it, I always feel like I'm having to decode it. But I can easily and happily work with some programming languages that most devs would cross the street to avoid.
It is probably because you haven't learned the basics.
Whenever anyone has issues understanding CSS, they haven't bothered learning the basics and think they can flub their way through doing it.
I don't understand what is ugly about the syntax.
<some element selector> {
property_1: <some value>
property_2: <some other value>
}
> As a user, nothing would thrill me more than if web pages just stopped using JS, though, so I am very happy that there is a feasible alternative to doing that that web devs could enjoy!
Non-trivial functionality requires JS. Basic Websites rarely require JS. So I am not sure what you are trying to say here.
Honestly the best thing I tell people to get some decent css basics is try to build a few stylus themes.
You can instantly see the results in devtools. I can't think of any other language that does that besides html, and even then you have to save and refresh.
Css is pretty easy to pick up in the chrome devtools at least because it has built in autocomplete. Showing you exactly what you can set the values too etc
The syntax has never been the issue imo.
You are over exaggerating the problems IMO. Yes it is a pain when you are left with a mess, but there are ways of dealing with that.
At that time I was a novice, didn't know what a debugger was (I printed everything out the the console / page) and didn't know what an IDE was (I think I was using Notepad++). I managed this feat by following the tutorial.
The biggest problem I had was that I couldn't understand why centre, and colour didn't work. Once I realised that I had to spell everything in American English, that problem quickly went away.
That's not the case with me, honestly. It's just a poor mesh with my brain is all.
> So I am not sure what you are trying to say here.
I'm trying to say that I dislike the use of JS, at least for common websites, and I'm in favor of anything that could reduce its use.
I am a former front-end developer that managed to figure out AWS, Go, C++, C#, JavaScript, Python, OpenGL and have done a LFS build. I am not some sort of mega genius. I just had to go through and read the correct material and learn the basics.
Any problems have nothing to do with that.
Those languages happen to be "imperative"? – the few backend devs I know who at least sort of vibe with CSS are all used to declarative programming. I think that might be at least one of the reasons?
The only one that comes to mind is is `with`, which is officially discouraged in the spec.
I suppose the other one is type coercion. (Like [] + [] stuff. That's no end of "ha ha JS weird.")
white-space seems pretty straight forward: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
vertical-align, yea, alignment in general is hard and IMO it's hard because it's a hard topic in general, CSS or native. but yea, it's not "vertical-align"
Anything but. It combines whitespace collapsing and text wrapping in one property and makes a mess of both.
See https://drafts.csswg.org/css-text-3/#white-space-property to get an idea of how complicated it is.
The MDN article is self-contradictory, e.g. note how the example don't match the "syntax" section.
Plus, it has inconsistent quirks with HTML textarea.
float: none;
clear: both;And the fact that yours was the only comment to point this out...
cool-thing {
display: flex;
&[shadow] {
box-shadow: 1px 1px #0007;
}
@media (width < 480px) {
flex-direction: column;
}
}
and html like
<cool-thing shadow>wow</cool-thing>
-- update --
my bad - I think it was just subtle and I thought it wasn't doing anything. Thanks for all the replies
also the box-shadow is a box shadow, you might wanna change it to text-shadow if that's what you'd expect from it
text-shadow does make more sense if you're actually trying out the code, but the original intention was to demonstrate a more complex element having a shadow modifier
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting...
- https://caniuse.com/css-media-range-syntax