Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Native CSS nesting now supported by all major browsers!

Posted on Aug 29 Today, Firefox version 117 has been released, which adds support for native Nesting of CSS rules! With that addition, all modern desktop browsers now support it! 🎉Do keep in mind that there are some mobile browsers that do not yet support it. Together, these account for about 3% of the global browser market share.Now that this feature is well supported, we can ask ourselves if using a CSS pre-processor is still worth the hassle.But first, a quick refresher.CSS nesting allows you to group related selectors together and potentially reduce the number of rules you need to write:It allows you to nest multiple levels, but please don't go overboard with nesting too deeply, as this adds up to the specificity of these CSS rules. This makes it hard to read and reuse your styles - nobody likes pyramids of doom! Deep nesting is simply unnecessary in most cases.Many people use so called CSS pre-processors such as SCSS or LESS that add fancy features to CSS, such as variables, mixins and functions, but they need to be transformed back to regular CSS during the build process of your app, so the browser can understand it.The features they offer are:All in all, most features can nowadays be replaced by native CSS and you can ask yourself whether extra pre-processing tools are still that useful.In large projects, it is still a good idea to use PostCSS, which will translate new CSS features to something that browsers understand today.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Ujjawal Kumar - Aug 28 Abto Software - Aug 28 Shubham Kant - Aug 28 Syed Muhammad Ali Raza - Aug 24 Once suspended, Ekeijl will not be able to comment or publish posts until their suspension is removed. Once unsuspended, ekeijl will be able to comment and publish posts again. Once unpublished, all posts by ekeijl will become hidden and only accessible to themselves. If ekeijl is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Edwin. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag ekeijl: ekeijl consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging ekeijl will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.



This post first appeared on VedVyas Articles, please read the originial post: here

Share the post

Native CSS nesting now supported by all major browsers!

×

Subscribe to Vedvyas Articles

Get updates delivered right to your inbox!

Thank you for your subscription

×