Modern CSS Code Snippets: Stop writing CSS like it's 2015

8 months ago by codeinabox to c/css

Side-by-side comparisons of outdated CSS techniques and their modern native replacements. Grid, custom properties, nesting, container queries, and more.
fox2263 5 points 8 months ago

Since CSS has changed so much that there are old and new ways of doing things, maybe they should have changed version numbers.

path: 0 22168110, hotness: undefined, score: 5, children: 4
towerful 3 points 8 months ago

Yeh, we need c++ss

path: 0 22168110 22169397, hotness: undefined, score: 3, children: 2
lambalicious 3 points 8 months ago
div.mydiv {
  template <Variable mycolor> 
  requires std::is_named_color<mycolor> || is_function_color<mycolor> || is_hexa<mycolor>
  mydiv& background-color: mycolor 
  noexcept( noexcept( background-color: mycolor) || !std::is_IE6 )
  --> decltype (css_declaration<property>)
  ;
}
path: 0 22168110 22169397 22171684, hotness: undefined, score: 3, children: 0
Kissaki 2 points 8 months ago

Please make them incompatible so that I have to upgrade.

path: 0 22168110 22169397 22171139, hotness: undefined, score: 2, children: 0
Kissaki 2 points 8 months ago

To what end? What would you expect version numbers to do? How would you specify or use them, which what consequences?

Grouping changes into releases with explicit numbering instead of a living standard with generic @supports checks?

I guess it would make some things easier and more obvious.

path: 0 22168110 22171167, hotness: undefined, score: 2, children: 0
andioop 5 points 8 months ago

thanks, this is the stuff I keep my programming.dev account for

path: 0 22169680, hotness: undefined, score: 5, children: 0
lambalicious 1 point 8 months ago

Do I wanna bet how many of these “““modern””” snippets are Chrome-exclusive?

path: 0 22165400, hotness: undefined, score: 1, children: 1
MimicJar 9 points 8 months ago

Each snippet clearly states which browsers+version supports it (as well as a general year if all major browsers support it). At a quick glance, with the exception of trying to find an unsupported on Firefox snippet, everything seemed supported by all major browsers.

path: 0 22165400 22168373, hotness: undefined, score: 9, children: 0
css
css

@programming.dev

login for more options
847
363
73

go to feed...