This idea that "what's old is new again" by @cassidoo seems to resonate with greater community this year, as plain ol' HTML, CSS and JS have gotten more powerful.
https://css-tricks.com/whats-old-is-new/
When we asked @erikdkennedy what he learned this year, this is what he had to say...
https://css-tricks.com/three-ways-to-distinguish-a-site-from-the-norm/
I learned to love the Same-Origin Policy by @etportis
https://css-tricks.com/i-learned-to-love-the-same-origin-policy/
25 Years of JavaScript & 25 Free Courses
https://css-tricks.com/25-years-of-javascript-25-free-courses/
Learning to Simplify by @piccalilli_
https://css-tricks.com/learning-to-simplify/
Slow Movement by @mmatuzo
https://css-tricks.com/slow-movement/
How to Use the Locomotive Scroll for all Kinds of Scrolling Effects by @D_kingnelson
https://css-tricks.com/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects/
The Power of Lampshading
https://css-tricks.com/the-power-of-lampshading/
We tend to judge things based on when *we* started, but that's different for everyone. Reexamine what you know, says @swyx.
https://css-tricks.com/its-always-year-zero/
Old is Solid; New Gets Talked About by @kilianvalkhof
https://css-tricks.com/old-is-solid-new-gets-talked-about/
RT Adam Argyle
CSS "individual transforms"
in 2021 we'll see these in a lot more styles! Firefox has it, Safari tech preview has it, and Chrome's nearly finished.
value:
- composable transforms
- single transform access
- write less
read more in the spec
https://drafts.csswg.org/css-transforms-2/#individual-transforms
Representation Matters
https://css-tricks.com/representation-matters/
Netlify & Next.js
https://css-tricks.com/netlify-next-js/
What did you learn this year? "Not much" says @IreAderinokun.
https://css-tricks.com/not-much/
Re Another classic one that would be handy, but it'll break in older browsers (so you need to split them up):
::selection, ::-moz-selection {
background: lightblue;
}
Re That code example in the previous tweet means that in IE 11, the entire selector is thrown out, making these submenus not work at all. If you split up those selectors, at least the :focus style will work.
Going forward, invalid selectors in a comma-separated chain will NOT invalidate the whole selector. But in older browsers, they DO.
/* dangerous! */
.menu:focus .submenu,
.menu:focus-within .submenu {
display: block;
}
https://css-tricks.com/one-invalid-pseudo-selector-equals-an-entire-ignored-selector/
Give Users Control: The Media Session API by @broods_
https://css-tricks.com/give-users-control-the-media-session-api/
