Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions content/talks/vars-cascade.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,43 @@ tags:
- Custom Properties
slides: https://slides.oddbird.net/variables/
events:
- venue: SmashingConf
url: https://smashingconf.com/ny-2025/
date: 2025-10-06
end: 2025-10-09
adr: New York
slides: https://slides.oddbird.net/variables/smashing25/
video: https://youtu.be/F-vopd4wMvI
media: &ny25
youtube: F-vopd4wMvI
- venue: SmashingConf Austin/NY
url: https://smashingconf.com/austin-2020/
date: 2020-10-13
end: 2020-10-14
adr: Online
slides: https://slides.oddbird.net/variables/smashing1020/
media:
- <<: *ny25
span: full
summary: |
The Cascade makes CSS unique as a language –
forcing us to revisit
even the most common programming feature: the variable.
---

{% import 'embed.macros.njk' as embed %}

We might think that CSS variables (custom properties)
simply replace Sass or other pre-processors,
but the reality is much more interesting.
Cascading variables open up a range of new possibilities,
and can even be turned back on the cascade itself!
We’ll look at how cascading variables work,
and a full range of practical use-cases that are totally unique to CSS.

------

{{ embed.figure(
data=media,
caption='Conference videos...'
) }}
Comment on lines +50 to +53
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mirisuzanne Should we remove this embed? It seems broken for me:

Image

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, bother. I wonder if I can get Charis to let us embed. But yeah, I guess that's the best option for now.

2 changes: 1 addition & 1 deletion content/workshops/modern-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ events:
- venue: Smashing Workshop
date: 2025-10-09
adr: New York
url: https://smashingconf.com/ny-2025
url: https://smashingconf.com/ny-2025/
included:
- title: Interactive Sessions
text: Virtual or in-person
Expand Down
96 changes: 48 additions & 48 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1692,32 +1692,32 @@ __metadata:
languageName: node
linkType: hard

"@eslint/config-array@npm:^0.23.3":
version: 0.23.3
resolution: "@eslint/config-array@npm:0.23.3"
"@eslint/config-array@npm:^0.23.4":
version: 0.23.4
resolution: "@eslint/config-array@npm:0.23.4"
dependencies:
"@eslint/object-schema": "npm:^3.0.3"
"@eslint/object-schema": "npm:^3.0.4"
debug: "npm:^4.3.1"
minimatch: "npm:^10.2.4"
checksum: 10/5014b11b73056ded9d52fb306aa5e711a5b9ca92777bcb6d646f79d43327b0ac247fd7bd3dc15cedfe70cfddcef1ef49ecd874b6608cec617d592cd1b05c4a23
checksum: 10/a42bdf8d66d52703596d5a791eedb1ad79e232dad58e0450b65d8ad48c2fdf50ee62d26fe0e823092384e93378c39adeea30eb1cd12af7ee207a142f9e1996eb
languageName: node
linkType: hard

"@eslint/config-helpers@npm:^0.5.3":
version: 0.5.3
resolution: "@eslint/config-helpers@npm:0.5.3"
"@eslint/config-helpers@npm:^0.5.4":
version: 0.5.4
resolution: "@eslint/config-helpers@npm:0.5.4"
dependencies:
"@eslint/core": "npm:^1.1.1"
checksum: 10/3b84df3d13bd9118807602136ee6cfbf98540d5959d1515fc46d96c605859eda978bed69289fb93d290fc1f4b5e339c9e1e2cba3a29d7ac8f1f93adb32a35d1a
"@eslint/core": "npm:^1.2.0"
checksum: 10/277c951ac82b28e2f56adae3cf64ddcfa4e0fb07e8beaa853c2070e07fcb6062fc48a257ddfa12027aaead698f031bc81c343e0c9ddf7a8f59b724e119552897
languageName: node
linkType: hard

"@eslint/core@npm:^1.1.1":
version: 1.1.1
resolution: "@eslint/core@npm:1.1.1"
"@eslint/core@npm:^1.2.0":
version: 1.2.0
resolution: "@eslint/core@npm:1.2.0"
dependencies:
"@types/json-schema": "npm:^7.0.15"
checksum: 10/e847dd70b4398ba9e732ff50cc14a47114531d6e746c345278998881e6714ca665a1af0056694a18e48d87adec77c5b595b5badde1e55f6671ed5afe731701f7
checksum: 10/b4e459ea69935cbed0b99f2160631fcabb3489d950dde86989b1da395f7649bedb14c702afc82e7cb64b6d7c62a6a10f8dae8dcf4c92dc3035bcbe531e65603e
languageName: node
linkType: hard

Expand All @@ -1733,20 +1733,20 @@ __metadata:
languageName: node
linkType: hard

"@eslint/object-schema@npm:^3.0.3":
version: 3.0.3
resolution: "@eslint/object-schema@npm:3.0.3"
checksum: 10/24425256313eb41f315aa5f483a193986d488798c9e51b75a9e82c360e57663cbf6a7d64460a572719e2103f3c386308ad5eb4f9c79d4f9ec51aa00a4ce4e2ab
"@eslint/object-schema@npm:^3.0.4":
version: 3.0.4
resolution: "@eslint/object-schema@npm:3.0.4"
checksum: 10/16daaf207aea472852465619fd29db29e0ab897353347020c52d526e27d8ceb44516506d4da61ff0a89cb8bd5ad935b882aca255ff1bc44ea9a59b1bd8de75bb
languageName: node
linkType: hard

"@eslint/plugin-kit@npm:^0.6.1":
version: 0.6.1
resolution: "@eslint/plugin-kit@npm:0.6.1"
"@eslint/plugin-kit@npm:^0.7.0":
version: 0.7.0
resolution: "@eslint/plugin-kit@npm:0.7.0"
dependencies:
"@eslint/core": "npm:^1.1.1"
"@eslint/core": "npm:^1.2.0"
levn: "npm:^0.4.1"
checksum: 10/8af22d94720b2474a992a80c5be7584baf75821386d25c34966b359fbc1e3a319989df721404c48c08b20e115683d6d0b344793dc354f5916c2d867c6c0aa04e
checksum: 10/3e435cc19db205f4a70ecba060e22b9b7efa2809426c0b020347b3aea0ae5e3507628486c1bc1a18a32fbad1e8cf0fd2ec11ca6ca6a6b958d141291426257c15
languageName: node
linkType: hard

Expand Down Expand Up @@ -3910,11 +3910,11 @@ __metadata:
linkType: hard

"baseline-browser-mapping@npm:^2.10.12":
version: 2.10.14
resolution: "baseline-browser-mapping@npm:2.10.14"
version: 2.10.16
resolution: "baseline-browser-mapping@npm:2.10.16"
bin:
baseline-browser-mapping: dist/cli.cjs
checksum: 10/87af5698be54da1f76bcf7833df071965ea62fed92c3ac4b0fad35c8c788ece9a4193148befca91fe19aecec7d13d9ec6d2d55931cc6b46dd1f5b1c8248cda9b
checksum: 10/822f803785bb08169730e0cbf832ede7ee30010c5321965d709c8e76e6f0e9cadb3f042b4dd91ae24c43f7dc64b9a600a7034226f97662eea6e0625704988150
languageName: node
linkType: hard

Expand Down Expand Up @@ -4198,9 +4198,9 @@ __metadata:
linkType: hard

"caniuse-lite@npm:^1.0.30001774, caniuse-lite@npm:^1.0.30001782":
version: 1.0.30001784
resolution: "caniuse-lite@npm:1.0.30001784"
checksum: 10/1450e306d0517cea65931e417dada2266c797ebab86de484af7510dbae9a7dd60abab1a70bcd725f7b87e5d1816e1526a495fb089a7447dea046adf2a24fff97
version: 1.0.30001786
resolution: "caniuse-lite@npm:1.0.30001786"
checksum: 10/69c4c3baa10091e7d2083e782bc0d931fe6e3b04399c381bf4bc3e469bc05d7cca6d964cd113a008bf7b431e08d567475b0b6ff78d13f521f73e738e141d5a0e
languageName: node
linkType: hard

Expand Down Expand Up @@ -5134,9 +5134,9 @@ __metadata:
linkType: hard

"dotenv@npm:^17.4.0":
version: 17.4.0
resolution: "dotenv@npm:17.4.0"
checksum: 10/b78852cf21de5eeb7db0777bebcf40871cd776b43edb4c52e1dcebadf6794eb35524abe68ea2436dd0f1691ccb8d273ec5cf301b8ca5071f56340308a317e199
version: 17.4.1
resolution: "dotenv@npm:17.4.1"
checksum: 10/addbff54aed55b80b5d4527ba0a221a63718835c10a2ed7d949f5caeab96995796a4c88f30263724aa71014aa4e3092a1ef551559ddef44d68c429494e13ff68
languageName: node
linkType: hard

Expand Down Expand Up @@ -5586,15 +5586,15 @@ __metadata:
linkType: hard

"eslint@npm:^10.1.0":
version: 10.1.0
resolution: "eslint@npm:10.1.0"
version: 10.2.0
resolution: "eslint@npm:10.2.0"
dependencies:
"@eslint-community/eslint-utils": "npm:^4.8.0"
"@eslint-community/regexpp": "npm:^4.12.2"
"@eslint/config-array": "npm:^0.23.3"
"@eslint/config-helpers": "npm:^0.5.3"
"@eslint/core": "npm:^1.1.1"
"@eslint/plugin-kit": "npm:^0.6.1"
"@eslint/config-array": "npm:^0.23.4"
"@eslint/config-helpers": "npm:^0.5.4"
"@eslint/core": "npm:^1.2.0"
"@eslint/plugin-kit": "npm:^0.7.0"
"@humanfs/node": "npm:^0.16.6"
"@humanwhocodes/module-importer": "npm:^1.0.1"
"@humanwhocodes/retry": "npm:^0.4.2"
Expand Down Expand Up @@ -5626,7 +5626,7 @@ __metadata:
optional: true
bin:
eslint: bin/eslint.js
checksum: 10/fb0c65660f6a98d6411d47c4a9cd14783e97f50481046de61903be59005f48a2b9a7c120e83280ec21298232b2369d3848b44e99017852b23bd794ca6ea44b66
checksum: 10/583589ed96922aad9507c94339e843c8929c297d505ae7d70579cef56b435a10d8a48d24616eb4fb53fbe75d8655adb8e44add5d5b2bca100148d31d890ab3a4
languageName: node
linkType: hard

Expand Down Expand Up @@ -8312,14 +8312,14 @@ __metadata:
linkType: hard

"liquidjs@npm:^10.25.0":
version: 10.25.2
resolution: "liquidjs@npm:10.25.2"
version: 10.25.3
resolution: "liquidjs@npm:10.25.3"
dependencies:
commander: "npm:^10.0.0"
bin:
liquid: bin/liquid.js
liquidjs: bin/liquid.js
checksum: 10/0e1f28b522c8ca3b9d00969d1021db6e6927011d948e057084c91a5e271fa1e63d39195c30ca8b96cbab1b473614f2fdc510496046b39522a98b89a183bf5f7c
checksum: 10/d491c93216ce4533460516951cc4f30e0515c9f9852460426673b52b69da543879aa309d7c40a15d2dbbbf55dfcf846d5d1213f9342a35265bd6fc995a478aa7
languageName: node
linkType: hard

Expand Down Expand Up @@ -8625,9 +8625,9 @@ __metadata:
linkType: hard

"lru-cache@npm:^11.0.0, lru-cache@npm:^11.1.0, lru-cache@npm:^11.2.1":
version: 11.2.7
resolution: "lru-cache@npm:11.2.7"
checksum: 10/fbff4b8dee8189dde9b52cdfb3ea89b4c9cec094c1538cd30d1f47299477ff312efdb35f7994477ec72328f8e754e232b26a143feda1bd1f79ff22da6664d2c5
version: 11.3.0
resolution: "lru-cache@npm:11.3.0"
checksum: 10/e94d4d1159299f745e9f9e75927e460aede732daa339141a887695e6d75c8d1a393bd0e79b02769bd9344e76eec0c02685e6c0f5c741cfa559488d86fec645dd
languageName: node
linkType: hard

Expand Down Expand Up @@ -10320,13 +10320,13 @@ __metadata:
linkType: hard

"regjsparser@npm:^0.13.0":
version: 0.13.0
resolution: "regjsparser@npm:0.13.0"
version: 0.13.1
resolution: "regjsparser@npm:0.13.1"
dependencies:
jsesc: "npm:~3.1.0"
bin:
regjsparser: bin/parser
checksum: 10/eeaabd3454f59394cbb3bfeb15fd789e638040f37d0bee9071a9b0b85524ddc52b5f7aaaaa4847304c36fa37429e53d109c4dbf6b878cb5ffa4f4198c1042fb7
checksum: 10/3383e9dab8bc8cd09efcd9538191b1e194b1921438ca69fce833d1a447d0625635229464cbc6cb03f33e5d342f2d343e2738fdac9132e2470bca621e480c02ec
languageName: node
linkType: hard

Expand Down