2d:null 2e:["$","title",null,{"children":"CSS Variables #2: Tips and Tricks | Gabriel Gianordoli | Observable"}] 33:T466,

Caption for this cute cat.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, iaculis ac semper eget, blandit vel leo. Nam id dolor eget dui tristique blandit. Proin sed maximus libero, at porta quam. Nulla vulputate, neque quis ornare interdum, dolor velit euismod tortor

Quis rutrum augue leo quis dolor. Donec nulla leo, molestie eget nisl vehicula, interdum gravida odio. Nam dictum quis metus vitae sollicitudin. Fusce bibendum erat tristique facilisis fringilla. Mauris et justo varius, ornare lacus sit amet, imperdiet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean finibus urna sed laoreet semper. Fusce egestas tortor vitae commodo molestie. Quisque a lacus elit.

34:[] 31:{"id":"9d1b0d2e4398fd42","slug":"css-variables-2-tips-and-tricks","title":"CSS Variables #2: Tips and Tricks","thumbnail":"713b3d2aa09676fa31235d00956c56e00af3c9a7009c7451b24aa71971615a38","access_level":"public","create_time":"$D2021-08-06T14:30:06.105Z","update_time":"$D2021-08-12T17:24:04.149Z","view_time":null,"first_public_time":"$D2021-08-06T14:42:20.163Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"9db89550eb5ae0fc","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":"starter_2024"},"version":193,"publish_version":193,"role":null,"authored":false,"authors":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null}],"members":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"CSS Variables #2: Tips and Tricks","cells":[{"id":0,"value":"# CSS Variables #2: Tips and Tricks\n\nNow that we have seen the [basics of CSS variables](https://observablehq.com/@gianordoli/css-variables), let’s go over some more practical uses of it.\n\n## 1. Mobile viewport height\n\nEverybody knows how working with `vh` on mobile is crazy. To get the *actual* viewport height you always need some JS, but this CSS variable method might help you write *a little less* JS. \nFirst, let’s create a variable called `--viewport-height` and use it instead of `vh`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"The trick here is to *always* use `--viewport-height` whenever you need `vh`. So, if you need en element that is `5vh`-tall, you should use a `calc()` like in the `.g-header` above. \nNow for the JS:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"{\n const windowWidth = document.documentElement.clientWidth;\n const windowHeight = document.documentElement.clientHeight;\n if (windowWidth < 740) {\n document.documentElement.style.setProperty('--viewport-height', `${windowHeight}px`); \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"That means that *only on mobile*, which we are defining as any viewport smaller than 740px, we will measure the actual viewport height and update the `--viewport-height` variable with that pixel measure. \nThat will also scale every vh-dependent element you have, without the need to selecting and looping through them all in JS to update their height.\n\n*Note: there’s a [known issue](https://talk.observablehq.com/t/window-height/2864) on ObservableHQ when using `vh`. It is due to the fact that these notebooks run on an iframe. For that reason, I won’t be applying the code above to an actual markup sample.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"## 2. Type styles and shorthands\n\nYou can combine variables to build shorthands. I usually employ this when declaring type styles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"## 3. Dark mode\n\nYou can easily create a dark theme by combining CSS variables and the ability to set them via Javascript. In the example below, I am creating a background and a text color for each mode (dark and light). Then, 2 other variables — one for background and one for text — are set using the colors from the modes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"It is important that you set the color of your elements using the `--color-bg` and `--color-text` variables, so the change takes effect when you switch modes. Then you can build a simple toggle to alternate between dark and light modes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof colorMode = Inputs.button(\"Switch color mode\", {value: 'light', reduce: (value) => {\n return value === 'dark' ? 'light' : 'dark';\n}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"{\n if (colorMode === 'dark') {\n document.documentElement.style.setProperty('--color-bg', 'var(--color-dark-bg)');\n document.documentElement.style.setProperty('--color-text', 'var(--color-dark-text)');\n } else {\n document.documentElement.style.setProperty('--color-bg', 'var(--color-light-bg)');\n document.documentElement.style.setProperty('--color-text', 'var(--color-light-text)');\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"Notice that you could also set the colors directly here in JS, by doing `document.documentElement.style.setProperty('--color-text', 'white')`, for instance. I personally think that managing colors via CSS is easier, though.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"## 4. Custom styles from data source\n\nSay your page has a grid layout that is driven my some data source, like a doc — or the Javascript object below. As you’ll see below, I want different grids on desktop and mobile — 8 and 12 columns. And I want to set different column sizes based on viewport for each element as well:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"images = [\n {\n asset: 'https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/slideshows/is_my_cat_normal_slideshow/1800x1200_is_my_cat_normal_slideshow.jpg',\n column_desktop: '5/13',\n column_mobile: '1/9',\n }, \n {\n asset: 'https://images.theconversation.com/files/350865/original/file-20200803-24-50u91u.jpg',\n column_desktop: '2/7',\n column_mobile: '1/4',\n }, \n {\n asset: 'https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/scoop_on_cat_poop_other/1800x1200_scoop_on_cat_poop_other.jpg',\n column_desktop: '8/13',\n column_mobile: '4/9',\n }, \n {\n asset: 'https://www.humanesociety.org/sites/default/files/styles/1240x698/public/2018/08/cat-home-441939.jpg',\n column_desktop: '5/11',\n column_mobile: '3/8',\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"Now, moving along with this *very specific example*, say that our data-source-to-markup magic happens on the server, using some templating engine. Well, if that happens on the server, I can’t pick which column value to use. But I want to be able to pass both to the markup somehow and let the browser pick the appropriate one based on the viewport later. \nWe could maybe pass them via `data-` attributes, but then we would need Javascript to listen to the browser width and apply the styles ... But using JS instead of CSS to handle this doesn’t sound right. \nSo, what we can do is set the column values as css variables on the element’s inline styles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"markup = images.map((image, i) => {\n return `

` \n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"html `

${markup}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"