corpus.blog
41,554 blogs · 5,181,941 posts Claim your blog
Record · corpus.blog/posts/01a0fee1-780f-7149-b53a-97cd9aee8f54

Modern CSS in Real Life

Chris Coyier · published 6 June 2023

A record is what was published and who pointed at it. The text of the post is not held here: read it at the source, or at its Wayback capture.

Read the post at chriscoyier.net Wayback capture
5blogs citing
First cited
2 Jul 2023
Most recent
21 May 2024
Rank this month
not ranked
External links
74
Words captured
8,607

Cited by

Blog
In the post
Date
Eric Bailey
contrast-color() is a good thing, but also solving the problem at the wrong layer Read at the source ↗
21 May 2024
leereamsnyder.com
Write CSS. Not too much. Mostly scoped. Read at the source ↗
22 Feb 2024
kula.blog
2023 October. Blogging and Reading Read at the source ↗
31 Oct 2023
andrewwalpole.com
The Web Is Moving at an Unprecedented Pace Read at the source ↗
12 Jul 2023
danburzo.ro
WSF 44 Read at the source ↗
2 Jul 2023

Links from this post

Link
Host
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Rocko-Rama-waving.png?quality=80&ssl=1
i0.wp.com
https://www.renderatl.com/schedule
renderatl.com
https://www.cnn.com/interactive/2022/10/us/black-women-nonbinary-surfers-cec-cnnphotos/
cnn.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-2.00.49-PM-1.png?quality=80&ssl=1
i0.wp.com
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
developer.mozilla.org
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.018-1.png?quality=80&ssl=1
i0.wp.com
https://web.dev/learn/css/logical-properties/
web.dev
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Screenshot-2023-06-03-at-1.48.34-PM.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Screenshot-2023-06-03-at-1.50.12-PM-2.png?quality=80&ssl=1
i0.wp.com
https://translate.google.com/
translate.google.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.021.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Screenshot-2023-06-03-at-1.55.53-PM.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.023-1.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Screenshot-2023-06-03-at-2.00.09-PM.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Screenshot-2023-06-06-at-10.45.55-AM.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.027-2.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.028-1.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.029-2.png?quality=80&ssl=1
i0.wp.com
https://jakearchibald.com/2021/great-alt-text/
jakearchibald.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.031.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.032-1.png?quality=80&ssl=1
i0.wp.com
https://web.dev/viewport-units/
web.dev
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.033.png?quality=80&ssl=1
i0.wp.com
https://codepen.io/chriscoyier/pen/RweZqqQ
codepen.io
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
css-tricks.com
https://almanac.httparchive.org/en/2022/css
almanac.httparchive.org
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.036.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Screenshot-2023-06-03-at-4.20.14-PM.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.039.png?quality=80&ssl=1
i0.wp.com
https://masonry.desandro.com/
masonry.desandro.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.040-2.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.041-1.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.042-1.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.043.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Screenshot-2023-06-03-at-4.44.58-PM.png?quality=80&ssl=1
i0.wp.com
Container Query Units and Fluid Typography Read at the source ↗
moderncss.dev
https://atomicdesign.bradfrost.com/chapter-2/
atomicdesign.bradfrost.com
https://storybook.js.org/
storybook.js.org
https://design-system.service.gov.uk/
design-system.service.gov.uk
https://www.webcomponents.org/
webcomponents.org
https://blog.prototypr.io/the-magic-behind-lego-s-green-base-plate-8cdd8563fc61
blog.prototypr.io
https://codepen.io/chriscoyier/pen/jOeBzNN
codepen.io
Responsive Components: a Solution to the Container Queries Problem Read at the source ↗
philipwalton.com
https://www.w3.org/TR/mediaqueries-5/
w3.org
CSS Style Queries Read at the source ↗
ishadeed.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.058.png?quality=80&ssl=1
i0.wp.com
https://caniuse.com/?search=cascade%20layers
caniuse.com
https://css-tricks.com/css-cascade-layers/
css-tricks.com
https://getbootstrap.com/
getbootstrap.com
https://shoptalkshow.com/
shoptalkshow.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.066.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.067.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.068-1.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.070.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Screenshot-2023-06-03-at-6.27.26-PM.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.072.png?quality=80&ssl=1
i0.wp.com
OKLCH Color Picker & Converter Read at the source ↗
oklch.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.073.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.079.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.075.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.077.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.078-1.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.081-1.png?quality=80&ssl=1
i0.wp.com
https://codepen.io/chriscoyier/pen/KKGzpzm
codepen.io
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.083.png?quality=80&ssl=1
i0.wp.com
https://nerdy.dev/easy-hsl-rainbow
nerdy.dev
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.087.png?quality=80&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.088-1.png?quality=80&ssl=1
i0.wp.com
https://front-end.social/@eeeps/109955851076325361
front-end.social
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.001.jpeg?quality=89&ssl=1
i0.wp.com
https://i0.wp.com/chriscoyier.net/wp-content/uploads/2023/06/Modern-CSS-in-Real-Life.092-1.png?quality=80&ssl=1
i0.wp.com
https://developer.chrome.com/docs/web-platform/view-transitions/
developer.chrome.com
https://github.com/Charca/view-transitions-live
github.com
https://shoptalkshow.com/566/
shoptalkshow.com
Elsewhere on chriscoyier.net (3)