5 ms·

This is really amazing. The last CSS thing I learned about was flex-box and it so vastly improved my side projects. I'm sure this will come quite handy too. Wh

This is really amazing. The last CSS thing I learned about was flex-box and it so vastly improved my side projects. I'm sure this will come quite handy too. What are more such things which you love about CSS but only learned about recently? Can greatly benefit CSS dinosaurs like me who know CSS but haven't really kept up on the recent developments.

city41 5y ago
inset is a handy shortcut. https://developer.mozilla.org/en-US/docs/Web/CSS/inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset
Swizec 5y ago
Look into grid. It’s like flexbox on steroids – 2D positionint instead of 1D. <div> hell just melts away
lelandfe 5y ago
Sometimes you want to change things on touch input devices - thumbs are quite bigger than cursors. Here's a tidy way to do that: .foo-component { --size: 20px; width: --size; height: --size; @media (hover: none) { --size: 40px; } }
- micromacrofoot 5y ago
  unfortunately this is a little unreliable for detecting touch screen laptops
  - afavour 5y ago
    Yes, the correct way (these days) to detect what the OP actually wants is the pointer media query: https://davidwalsh.name/pointer-media-query https://davidwalsh.name/pointer-media-query Which has values for coarse (finger) and fine (mouse, tablet, etc)
    - emsixteen 5y ago
      > This media query has not yet been implemented and is currently only a proposed spec. I've written this post to raise awareness of it and get general thoughts about it. Great to be aware of what might come, but.. it's not an option if it's literally just proposed.
      - afavour 5y ago
        That article was written in 2012, it just happens to be a good guide. It’s widely supported today: https://caniuse.com/css-media-interaction https://caniuse.com/css-media-interaction
  - lelandfe 5y ago
    You're likely referring to a Chrome bug fixed back in 2014: https://bugs.chromium.org/p/chromium/issues/detail?id=441613 https://bugs.chromium.org/p/chromium/issues/detail?id=441613 The reason to use `hover`, instead of `pointer` like a sibling comment mentioned, is for accessibility purposes: > For accessibility reasons, even on devices that do support hovering, the UA may give a value of hover: none to this media query, to opt into layouts that work well without hovering. https://drafts.csswg.org/mediaqueries-4/#hover https://drafts.csswg.org/mediaqueries-4/#hover
    - micromacrofoot 5y ago
      no i mean that touch devices with a dedicated mouse can be detected as no-hover devices (usually laptops with touch screens)… which is often not desirable
      - lelandfe 5y ago
        Ah – I err on the other side (keeping things usable for touch input). Two sides to a coin! That is a useful thing to keep in mind when writing this though, good point. I view this not as "unreliable for detecting touch screen laptops" but reliably detecting touch screens.
        jrochkind1 5y ago
        I think you're reading the comments backwards, maybe. A laptop that has a mouse and a touch-screen will in some cases NOT be detected as a touch screen. When you say that is "reliably detecting touch screens", I'm not sure if you're following. If that results in delivering your "not as usable for touch screens" UI, that is not "erring on the side of keeping things usable for touch input"
        lelandfe 5y ago
        > A laptop that has a mouse and a touch-screen will in some cases NOT be detected as a touch screen What you are saying here is the opposite of the comment that I'm replying to, and is the opposite of the W3 spec. Are you sure? micromacrofoot correctly said: > touch devices with a dedicated mouse can be detected as no-hover devices "no-hover devices" are AKA touch input devices, and will therefore satisfy the query `hover: none`. The spec says as such: For example, on a touch screen device that can also be controlled by an optional mouse, the `hover` media feature should match `hover: none`, as the primary pointing device (the touch screen) does not allow the user to hover. However, despite this, the optional mouse does allow users to hover. Authors should therefore be careful not to assume that the ':hover' pseudo class will never match on a device where 'hover:none' is true, but they should design layouts that do not depend on hovering to be fully usable. https://www.w3.org/TR/mediaqueries-4/#example-3d419780 https://www.w3.org/TR/mediaqueries-4/#example-3d419780
qbasic_forever 5y ago
Grid is really nice: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La... People are finding all sorts of fun things to do with it: https://web.dev/one-line-layouts/ https://web.dev/one-line-layouts/ and https://moderncss.dev/3-popular-website-heroes-created-with-css-grid-layout/ https://moderncss.dev/3-popular-website-heroes-created-with-...
supermdguy 5y ago
I just learned about scroll snap after fighting various JS-based libraries for hours, it makes it really easy to build slideshow type UI's https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_...
bryanrasmussen 5y ago
Personally I think the most useful 'new' things in CSS that hardly anyone uses yet are the min, max, and Clamp functions. I wrote about them here https://blog.logrocket.com/min-max-clamp-css-functions/ https://blog.logrocket.com/min-max-clamp-css-functions/ - there are some real embarrassments in that article (probably due to me being busy with other things at the time of writing, and being outside my comfort zone [dealing with design]) - example silly statement: "these functions can accept anything that is a number or a calculable value, like the length of a variable, as an input." length of a variable? WTF did I write that for!?! I could also probably have saved my time because the day after I finished writing it I found this post https://ishadeed.com/article/css-min-max-clamp/ https://ishadeed.com/article/css-min-max-clamp/ which makes a lot of the same points, less verbosely, and better, with much nicer looking examples because I guess this guy has a design sense. on edit: I mean I am just jealous of the examples he made, I sweated trying to make something up to show the power of the functions and explain their use and I don't think I did a good job of it, didactically, and his examples were really good. Probably he sweated to, but they look effortless.
- pilaf 5y ago
  Do these functions make min-width and min-height obsolete? Or is there still any reason to use those instead of min()/max()/clamp()? Edit: just noticed the articles you linked have nice examples of combining the two (should've read first), and it makes perfect sense since min-width/min-height deal with how elements grow to fit their contents, while something like `width: clamp(...)` would be declaring the width instead.
  - bryanrasmussen 5y ago
    they don't make them obsolete, but they do make them less important. Without these functions people probably have more media queries with min-width min-height max-width max-height, with them maybe one or two without media queries is needed.
fleddr 5y ago
CSS grids are a layout revolution. Quite difficult to learn, but very powerful. It may take years before the community understands all that it has to offer. Container queries are a game changer, although not fully ready across browsers yet. CSS variables have been around for a while now, but still considered fairly new. CSS nesting is also around the corner. When you combine these two things, you can start considering to drop CSS preprocessors like SCSS. CSS layers is brand new and may be useful when working with design language systems. And as an unimportant but fun last one: you can now address colors outside the RGB color space.
jrochkind1 5y ago
i guarantee the next thing you want to learn is `grid`. It takes a bit of time to get your head around, then you realize you can do just about anything, fluid-responsively.

city41 5y ago

inset is a handy shortcut. https://developer.mozilla.org/en-US/docs/Web/CSS/inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset

Swizec 5y ago

Look into grid. It’s like flexbox on steroids – 2D positionint instead of 1D. <div> hell just melts away

lelandfe 5y ago

Sometimes you want to change things on touch input devices - thumbs are quite bigger than cursors. Here's a tidy way to do that: .foo-component { --size: 20px; width: --size; height: --size; @media (hover: none) { --size: 40px; } }

micromacrofoot 5y ago
unfortunately this is a little unreliable for detecting touch screen laptops
- afavour 5y ago
  Yes, the correct way (these days) to detect what the OP actually wants is the pointer media query: https://davidwalsh.name/pointer-media-query https://davidwalsh.name/pointer-media-query Which has values for coarse (finger) and fine (mouse, tablet, etc)
  - emsixteen 5y ago
    > This media query has not yet been implemented and is currently only a proposed spec. I've written this post to raise awareness of it and get general thoughts about it. Great to be aware of what might come, but.. it's not an option if it's literally just proposed.
    - afavour 5y ago
      That article was written in 2012, it just happens to be a good guide. It’s widely supported today: https://caniuse.com/css-media-interaction https://caniuse.com/css-media-interaction
- lelandfe 5y ago
  You're likely referring to a Chrome bug fixed back in 2014: https://bugs.chromium.org/p/chromium/issues/detail?id=441613 https://bugs.chromium.org/p/chromium/issues/detail?id=441613 The reason to use `hover`, instead of `pointer` like a sibling comment mentioned, is for accessibility purposes: > For accessibility reasons, even on devices that do support hovering, the UA may give a value of hover: none to this media query, to opt into layouts that work well without hovering. https://drafts.csswg.org/mediaqueries-4/#hover https://drafts.csswg.org/mediaqueries-4/#hover
  - micromacrofoot 5y ago
    no i mean that touch devices with a dedicated mouse can be detected as no-hover devices (usually laptops with touch screens)… which is often not desirable
    - lelandfe 5y ago
      Ah – I err on the other side (keeping things usable for touch input). Two sides to a coin! That is a useful thing to keep in mind when writing this though, good point. I view this not as "unreliable for detecting touch screen laptops" but reliably detecting touch screens.
      - jrochkind1 5y ago
        I think you're reading the comments backwards, maybe. A laptop that has a mouse and a touch-screen will in some cases NOT be detected as a touch screen. When you say that is "reliably detecting touch screens", I'm not sure if you're following. If that results in delivering your "not as usable for touch screens" UI, that is not "erring on the side of keeping things usable for touch input"
        lelandfe 5y ago
        > A laptop that has a mouse and a touch-screen will in some cases NOT be detected as a touch screen What you are saying here is the opposite of the comment that I'm replying to, and is the opposite of the W3 spec. Are you sure? micromacrofoot correctly said: > touch devices with a dedicated mouse can be detected as no-hover devices "no-hover devices" are AKA touch input devices, and will therefore satisfy the query `hover: none`. The spec says as such: For example, on a touch screen device that can also be controlled by an optional mouse, the `hover` media feature should match `hover: none`, as the primary pointing device (the touch screen) does not allow the user to hover. However, despite this, the optional mouse does allow users to hover. Authors should therefore be careful not to assume that the ':hover' pseudo class will never match on a device where 'hover:none' is true, but they should design layouts that do not depend on hovering to be fully usable. https://www.w3.org/TR/mediaqueries-4/#example-3d419780 https://www.w3.org/TR/mediaqueries-4/#example-3d419780

qbasic_forever 5y ago

Grid is really nice: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La... People are finding all sorts of fun things to do with it: https://web.dev/one-line-layouts/ https://web.dev/one-line-layouts/ and https://moderncss.dev/3-popular-website-heroes-created-with-css-grid-layout/ https://moderncss.dev/3-popular-website-heroes-created-with-...

supermdguy 5y ago

I just learned about scroll snap after fighting various JS-based libraries for hours, it makes it really easy to build slideshow type UI's https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_...

bryanrasmussen 5y ago

Personally I think the most useful 'new' things in CSS that hardly anyone uses yet are the min, max, and Clamp functions. I wrote about them here https://blog.logrocket.com/min-max-clamp-css-functions/ https://blog.logrocket.com/min-max-clamp-css-functions/ - there are some real embarrassments in that article (probably due to me being busy with other things at the time of writing, and being outside my comfort zone [dealing with design]) - example silly statement: "these functions can accept anything that is a number or a calculable value, like the length of a variable, as an input." length of a variable? WTF did I write that for!?! I could also probably have saved my time because the day after I finished writing it I found this post https://ishadeed.com/article/css-min-max-clamp/ https://ishadeed.com/article/css-min-max-clamp/ which makes a lot of the same points, less verbosely, and better, with much nicer looking examples because I guess this guy has a design sense. on edit: I mean I am just jealous of the examples he made, I sweated trying to make something up to show the power of the functions and explain their use and I don't think I did a good job of it, didactically, and his examples were really good. Probably he sweated to, but they look effortless.

pilaf 5y ago
Do these functions make min-width and min-height obsolete? Or is there still any reason to use those instead of min()/max()/clamp()? Edit: just noticed the articles you linked have nice examples of combining the two (should've read first), and it makes perfect sense since min-width/min-height deal with how elements grow to fit their contents, while something like `width: clamp(...)` would be declaring the width instead.
- bryanrasmussen 5y ago
  they don't make them obsolete, but they do make them less important. Without these functions people probably have more media queries with min-width min-height max-width max-height, with them maybe one or two without media queries is needed.

fleddr 5y ago

CSS grids are a layout revolution. Quite difficult to learn, but very powerful. It may take years before the community understands all that it has to offer. Container queries are a game changer, although not fully ready across browsers yet. CSS variables have been around for a while now, but still considered fairly new. CSS nesting is also around the corner. When you combine these two things, you can start considering to drop CSS preprocessors like SCSS. CSS layers is brand new and may be useful when working with design language systems. And as an unimportant but fun last one: you can now address colors outside the RGB color space.

jrochkind1 5y ago

i guarantee the next thing you want to learn is `grid`. It takes a bit of time to get your head around, then you realize you can do just about anything, fluid-responsively.