CSS fanatics, unite! Exciting new features are here–and more are yet to come.
This what’s up with CSS latest version.
The programming world is abuzz with the prospect of CSS latest version. We looked under the hood to find out what was really going on – this is what we found.
What is CSS?
Here’s a quick recap. CSS, or Cascading Style Sheets, is a design language used for Frontend development. In simple terms, CSS allows you to apply styles to web pages, alter fonts, colours, sizes, content layout, add animations and so on. CSS is also, quite probably, the most popular Frontend development language in use.
Here is a brief history of CSS versions and standards.
What’s new in CSS latest version: 8 key additions
Although there are always new and exciting features being released, this latest version is the more than an update. In fact, it is the most significant change to this programming language in recent years. These are our favourite improvements.
:has() :more than a parent selector
This command allows you to select elements (parents) that contain other elements (children) that match the selector you pass into :has(). For example, you can select images that are accompanied by captions, or style all the sections that have an H2. We in the dev community have waited a long time for this feature and now that is here we can not help but feel a little disappointed that only Safari supports it. Hopefully, other mainstream browsers will soon follow.
Container Queries
Responsiveness in web design is not only a want but a need. Websites must be prepared to support various screens of different sizes. However, rearranging visual elements based on their viewport size can be tricky as not all elements adjust to their parent container automatically. With CSS’ latest version container queries, you now can modify your designs in a much more elegant way.
Subgrid of Grid
While grids may seem trivial, nested grids surely are a UI challenge – and not great for a customer’s 1.. Aligning nested grids to their parent grid can be a total nightmare, namely regarding responsiveness because the inside element will frequently overflow. A subgrid is a perfect addition to CSS’ latest version and is already available on Firefox and Safari.
Accent Colour
You can now change the colour of controls with a single line of code. Checkboxes, buttons, range inputs, or progress bars were typically a pain to style, but with accent-color, which is part of css-ui-4, it is now much easier to apply a specific colour while keeping the browser’s default input.
New Viewport Units
Remember the gymnastics you had to do to go around the viewport bug on Safari for iOS? We do too. But there’s awesome news. There are twenty new viewport units in CSS, which are a result of the joint effort of Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla. You can now use units svh, lvh, dvh, svw, lvw, and dvw to have more precise control over your designs and how they behave in relation to the users’ viewports.
Overscroll Behaviour
Overscroll-behavior overrides the default “bounce” that mobile browsers have when reaching the bottom of a page. If you continue scrolling down, you may see an empty area or, in some cases, refresh the page. While many websites already incorporate this feature, it generally this does not work very well as it may distract from the original content. Problem solved with this new feature.
@when/@else
Everyone who asked the online communities for an alternative to if/else statements in CSS: fingers crossed! The @where and @else operators are two conditional rules that will greatly simplify the writing of conditions and allow mutually exclusive rules with @else statements. Downside: this feature is not yet supported by mainstream browsers.
Cascade Layers
Managing cascade conflicts is one of the most confusing things to do in CSS, for example, when trying to override styles from a, say, third-party tool. Cascade layers give developers much more control over the “cascading” part of CSS. Lower layers will take precedence over those in higher layers, even if those have selectors with higher specificity. What does this mean in practice? More agility, more simplicity, more elegance while writing code, and exciting new challenges.
Looking for a Frontend Partner?
If you need help from CSS experts, be it for a frontend project, or an extended team to assist your in-house team in rewriting old legacy codebase onto responsive architecture, you are exactly in the right place. Our growing team loves challenges, that’s how we become better developers.
Take a look at our development cost calculator. And remember, there is no project too big for our superstar developers.
See which of our Nearshore Solutions is fit for your company, or just drop us a line if you are unsure about your business’ specific development needs. Get in touch with Near Partner and get your stylish website or app up and running.
