#cssnesting — Public Fediverse posts

#Development #Pitfalls
When CSS says ‘yes’ but browsers say ‘no’ · @supports doesn’t always behave as expected https://ilo.im/16ct5y

_____
#FeatureDetection #CssSelectors #CssNesting #Browsers #WebDev #Frontend #CSS

#Development #Pitfalls
When CSS says ‘yes’ but browsers say ‘no’ · @supports doesn’t always behave as expected https://ilo.im/16ct5y

_____
#FeatureDetection #CssSelectors #CssNesting #Browsers #WebDev #Frontend #CSS

#Development #Pitfalls
When CSS says ‘yes’ but browsers say ‘no’ · @supports doesn’t always behave as expected https://ilo.im/16ct5y

_____
#FeatureDetection #CssSelectors #CssNesting #Browsers #WebDev #Frontend #CSS

#Development #Pitfalls
When CSS says ‘yes’ but browsers say ‘no’ · @supports doesn’t always behave as expected https://ilo.im/16ct5y

_____
#FeatureDetection #CssSelectors #CssNesting #Browsers #WebDev #Frontend #CSS

I have a project where I can now use CSS Nesting in production and oh, it makes so many things nicer!

There are a lot of cases where you’d normally have to duplicate many class names for child selectors, which can now just be wrapped by one selector.

It also makes the structure of the rules more logical/clearer to read and can help group things together in a CSS file.

The implementers did a great job removing the requirement of nested selectors starting with a symbol, too 👌

#CSS #CSSNesting

#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” https://ilo.im/1679ci

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting

#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” https://ilo.im/1679ci

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting

#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” https://ilo.im/1679ci

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting

#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” https://ilo.im/1679ci

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting

#Development #Launches
CSS Boilerplate · A default CSS structure for projects of any size https://ilo.im/163i67

_____
#Boilerplate #CSS #CssReset #CssNesting #WebPerf #WebDev #Frontend #HTML

#Development #Launches
CSS Boilerplate · A default CSS structure for projects of any size https://ilo.im/163i67

_____
#Boilerplate #CSS #CssReset #CssNesting #WebPerf #WebDev #Frontend #HTML

#Development #Launches
CSS Boilerplate · A default CSS structure for projects of any size https://ilo.im/163i67

_____
#Boilerplate #CSS #CssReset #CssNesting #WebPerf #WebDev #Frontend #HTML

#Development #Launches
CSS Boilerplate · A default CSS structure for projects of any size https://ilo.im/163i67

_____
#Boilerplate #CSS #CssReset #CssNesting #WebPerf #WebDev #Frontend #HTML

#Development #Techniques
Approaches to the ‘&’ selector in CSS · More maintainable, readable, and clever CSS nesting https://ilo.im/1628p2

_____
#ModernCSS #Maintainability #Readability #Ampersand #CssNesting #Framework #WebDev #Frontend #CSS #Sass

#Development #Techniques
Approaches to the ‘&’ selector in CSS · More maintainable, readable, and clever CSS nesting https://ilo.im/1628p2

_____
#ModernCSS #Maintainability #Readability #Ampersand #CssNesting #Framework #WebDev #Frontend #CSS #Sass

#Development #Techniques
Conditional CSS grid template areas · A magic formula to “open the gates to layout heaven.” https://ilo.im/161t0f

_____
#Layout #CssGrid #CssNesting #ContainerQueries #LogicalProperties #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

#Development #Techniques
Fun with custom cursors · Two ways to change the default cursor appearance https://ilo.im/160i1z

_____
#Cursor #Customization #WebDev #Frontend #CSS #CssCursor #CssNesting #CustomProperties #JavaScript #React

#Development #Releases
CSS nesting improves · It gets much better with CSSNestedDeclarations https://ilo.im/160ct5

_____
#ModernCSS #CssNesting #Specification #Declaration #Coding #Browser #WebDev #Frontend #CSS

#Development #Techniques
Write better CSS with modern CSS · New CSS features can help you streamline your code https://ilo.im/15ynzs

_____
#ModernCSS #Code #Optimization #WebDev #Frontend #CSS #CssNesting #CustomProperty #MediaQuery

Okay, so CSS nesting is a thing that's neat and all, but why is https://codepen.io/freaktechnik/pen/vYPQKrb linear and not exponential? #css #cssnesting

A reminder that #CSSnesting is still a working draft in the #W3C under the #CSSWG. Please mind #webcompat when using this relatively new feature. IOW, don't make your #CSS break because you assumed everyone right now is using the latest version of #Chrome / #Chromium, #Firefox, #Safari, or #Edge. They might not even be using a mainstream #browser to visit your website (I am using #PaleMoon for example)... ​:seija_coffee:​

RE: https://c.im/users/youronlyone/statuses/111884225846166170

I just found out today that #CSSnesting is now out and supported by major browsers. I've completely forgotten about it when it first showed up as a CSSWG draft.

Hooray!

#CSS

---

P.S.

This is why I chose to create my own boilerplate from scratch. If I opted to use existing ones, what I'll be learning is “how to use their work” instead of “what's new in CSS”.

#Development #Guides
CSS Nesting · An in-depth guide with many use cases and examples https://ilo.im/15hxnk

_____
#WebDev #Browser #Frontend #CSS #CssNesting #Sass

#Development #Pitfalls
Surprising facts about the new CSS selectors · These selectors might trick you; use them with care https://ilo.im/15fvex

_____
#WebDev #CSS #CssNesting #CssSelectors #CssPseudoClasses #CssSpecificity

#Development #Pitfalls
Surprising facts about the new CSS selectors · These selectors might trick you; use them with care https://ilo.im/15fvex

_____
#WebDev #CSS #CssNesting #CssSelectors #CssPseudoClasses #CssSpecificity

#Development #Pitfalls
Surprising facts about the new CSS selectors · These selectors might trick you; use them with care https://ilo.im/15fvex

_____
#WebDev #CSS #CssNesting #CssSelectors #CssPseudoClasses #CssSpecificity

#Development #Pitfalls
Surprising facts about the new CSS selectors · These selectors might trick you; use them with care https://ilo.im/15fvex

_____
#WebDev #CSS #CssNesting #CssSelectors #CssPseudoClasses #CssSpecificity

#Development #Explainers
CSS Nesting and the cascade · What does CSS Nesting’s ‘relaxed parsing behavior’ mean? https://ilo.im/15a6ix

_____
#WebDev #Frontend #CSS #CssNesting

#Development #Introductions
A short introduction to CSS Nesting · Benefits and applications of a long-awaited CSS feature https://ilo.im/158jr9

_____
#WebDev #Frontend #CSS #CssNesting #Maintainability #Readability

#Development #Releases
Native CSS nesting support arrives in the big three browsers · The release of Firefox 117.0 completes the trifecta https://ilo.im/150a5r

_____
#WebDev #Frontend #Browser #CSS #CssNesting #Chrome #Firefox #Safari #Sass #PostCSS

Nesting is coming to native CSS! As of August 29th, with Firefox shipping v117, all modern browsers will have support for CSS Nesting. Let's learn CSS Nesting in 5 minutes!

https://www.youtube.com/watch?v=dr6UAQUAiu4

#css #cssnesting

#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n

_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts

#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n

_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts

#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n

_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts

#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n

_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts

#Development #Reviews
An introduction to native CSS nesting · Native nesting may shift your perspective on CSS preprocessors https://ilo.im/13yv8q

_____
#WebDevelopment #WebDev #Frontend #Code #CSS #CssNesting #CssPreprocessor #Sass

#Development #Reviews
Writing CSS In 2023 · Is it any different than a few years ago? https://ilo.im/145tp0

_____
#WebDevelopment #WebDev #Frontend #CSS #ContainerQueries #StyleQueries #CascadeLayers #CssNesting #CssIs #CssWhere #DynamicViewportUnits #ColorSpaces #ColorFunctionSyntax #MediaQueryRangeSyntax #UserPreferences

Two new articles about #CSS

One about making components with nesting, where I conclude, among other things, that #CSSnesting with has() and not() is especially fun to write since the ancestor and descendant can have the same styling based on whether or not the descendant exists.

https://8yd.no/article/making-components-with-css-nesting

I think we're going to regret #CSSNesting, at least the way it’s defined in the spec.

#CSS has been going in a very strong direction for the past five years. There just aren’t any more “gotchas” or confusing/misleading parts of modern CSS, because the W3C has worked their asses off essentially refactoring them all away... except nesting.

I think the sheer number of articles and posts coming out about “the gotchas of CSS nesting” should be a significant indicator to... https://notes.keithjgrant.com/notes/2023/06/i-think-were-going-to-regret/