--- title: "How CSS custom properties act alongside the CSS 'cascade'" publication: "Frontend Focus" issue: 398 published_at: "2019-07-03" canonical_url: "https://frontendfoc.us/issues/398" --- This week's HTML, CSS, browser, and frontend news #398 — July 3, 2019 [Read on the Web](https://frontendfoc.us/issues/398) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/uqjuumhsr9g50niksf0z.jpg)](https://thenextweb.com/google/2019/07/02/google-wants-to-make-the-25-year-old-robots-txt-protocol-an-internet-standard/) [Google Wants to Make The 25-Year-Old `robots.txt` Protocol An Internet Standard](https://thenextweb.com/google/2019/07/02/google-wants-to-make-the-25-year-old-robots-txt-protocol-an-internet-standard/) — Google has outlined plans to turn robots exclusion protocol (REP) — better known as `robots.txt` — into an internet standard after 25 years. [Here’s the official blog post announcement from Google](https://webmasters.googleblog.com/2019/07/repp-oss.html). Ravie Lakshmanan [CSS Custom Properties in the Cascade](https://www.smashingmagazine.com/2019/07/css-custom-properties-cascade/) — Custom properties, also known as CSS variables, provide a way to define and reuse property values, but how do they work in relation to CSS’s cascading abilities? Miriam Suzanne [![\](https://copm.s3.amazonaws.com/52cbee06.jpg)](https://frontendmasters.com/sale/trial/?utm_source=fefocus&utm_medium=email&utm_campaign=3freecourses) [Free Course: Get Started with JavaScript by Kyle Simpson 👍](https://frontendmasters.com/sale/trial/?utm_source=fefocus&utm_medium=email&utm_campaign=3freecourses) — Get three free courses: Getting Started with JavaScript, Complete Intro to Web Development & Practical Introduction to Algorithms free by [signing up for a trial account](https://frontendmasters.com/sale/trial/?utm_source=fefocus&utm_medium=email&utm_campaign=3freecourses) – no credit card required. Frontend Masters sponsor [Tips for Rolling Your Own Lazy Loading](https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/) — Various lazy loading techniques can often come with their own baggage, so here’s how to add _your own_ implementation to your site. Phil Hawksworth [TWGL.js: A Tiny WebGL Helper Library](http://twgljs.org/) — If you want to write and use actual WebGL but for it to be easier and less verbose, this is for you and the code comparisons will win you over in seconds. Gregg Tavares [How Google Pagespeed Works: How to Improve Your Score](https://calibreapp.com/blog/how-pagespeed-works/) — A look at how PageSpeed calculates its critical ‘speed score’ which not only reflects user experience but also has some input into how Google will rank your site. Ben Schwarz 💻 Jobs [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers. Work from anywhere with the world's leading brands. X-Team [Frontend Engineer at Goodreads (Amazon)](https://www.goodreads.com/jobs?id=750680) — Join Goodreads to build the frontend of a highly ambitious product that supports reading activities of more than 80 million readers. Goodreads [100+ Frontend Roles on hackajob 🎉](https://hackajob.co/p/discover?utm_source=cooperpress&utm_medium=paid&utm_campaign=fefocus_jul-9) — Upload your GitHub projects and we'll do the rest. Find a role based on your skills, average salary £70k. hackajob 📙 News, Tutorials & Opinion ▶[CSS Line Layout and Vertical Rhythm](https://www.youtube.com/watch?v=OtlGo48iTOk) — This session from the recent CSS Day conference, goes over upcoming features to improve CSS’s line box model, to control half-leading, and to maintain vertical rhythm. Elika J. Etemad [Getting Started with Offline Data in Web Apps](https://dev.to/remotesynth/getting-started-with-offline-data-in-web-apps-pt-1-136a) — A look at different options for determining the user’s online/offline status and connection speed. Brian Rinaldi ▶[Discussing SVGs with Sara Soueidan](https://syntax.fm/show/154/svgs-with-sara-soueidan) — Wes Bos talks to Sara Soueidan, a freelance frontend UI developer and trainer, about all things SVG. Covers animation, accessibility, graphing, filters and more. Syntax podcast [The State of JavaScript: 2019 and Beyond. Get the Whitepaper](https://www.telerik.com/campaigns/kendo-ui/wp-state-of-javascript-in-2019?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-general-whitepaper-state-of-js2019&utm_content=brieflink) Progress Kendo UI sponsor [The Ultimate Guide to Flexbox Centering](https://onextrapixel.com/flexbox-centering-guide/) — A solid reference with handy visuals. Onextrapixel [How To Create a PDF From Your Web Application](https://www.smashingmagazine.com/2019/06/create-pdf-web-application/) Rachel Andrew [Firefox Wants to Help You Fool Ad Trackers With 100 Useless Browser Tabs](https://variety.com/2019/digital/news/firefox-track-this-100-tabs-1203253096/) Janko Rottgers [CSS is Adding More Ways to Style Underlines:](https://twitter.com/jensimmons/status/1144038721400049664) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1562162023/jftaltuhgxg0xqtcigdl.png)](https://twitter.com/jensimmons/status/1144038721400049664) 🔧 Code, Tools & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/yncwh7lkrzwsakftcpht.jpg)](https://css-doodle.com/) [CSS Doodle: A Web Component for Drawing Patterns with CSS](https://css-doodle.com/) — A Custom Elements-based component that builds an internal grid of DIV elements and then populates them using CSS to create patterns. Yuan Chuan [static-site-boilerplate: A Better Workflow for Building Modern Static Websites](https://github.com/ericalli/static-site-boilerplate) — A boilerplate that takes care of automated build processes, a local development server, production minification and optimizations and more. Eric Alli [Want a Better Way to Store and Serve Images and Videos?](https://cloudinary.com/users/register/free?utm_source=front_end_focus&utm_medium=sponsored_placement&utm_campaign=dev_sign_up&utm_content=sponsored_link&utm_keyword=july_3_2019) — Join a community of over 400K web and mobile developers dynamically managing rich media with Cloudinary. Try it free. Cloudinary sponsor [The Best Open-Source Typefaces](https://beautifulwebtype.com/) — A collection of some of the best free fonts from Google and across the web, with examples, recommended pairings, OpenType features, and more. Chad Mazzola [SVG-Edit: A Powerful Browser-Based SVG Editor](https://github.com/SVG-Edit/svgedit) — A fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser. SVG-Edit 🗓 Upcoming Events [CSSCamp, July 17 — Barcelona, Spain](https://csscamp.tech) — One-day, one-track conference for web designers and developers. [An Event Apart, July 29-31 — Washington, D.C.](https://aneventapart.com/event/washington-dc-2019) — A popular three-day conference that focuses on all things relating to digital design and user experience. [WebAIM: Web Accessibility Training, August 13-14 — Logan, Utah](https://webaim.org/training/) — Covers everything from basic web accessibility principles to advanced accessibility techniques. [Front Conference, August 29-30 — Zurich, Switzerland](https://frontconference.com) — A two-day double-track conference for everyone involved from concept to implementation. [Web Unleashed 2019, September 13-14 — Toronto, Canada](https://fitc.ca/event/webu19/) — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'. [CSSConf, September 25 — Budapest, Hungary](http://cssconfbp.rocks) — A community conference dedicated to the designers and developers who love CSS. **🕰 ICYMI (Some older stuff that's worth checking out..)** - You can now define a simple performance budget in a JSON file for testing as part of a Lighthouse audit - [here's how](https://bitsofco.de/your-first-performance-budget-with-lighthouse/). - Obinna Ekwuno asks whether the [Tailwind CSS framework is 'tomorrow's Bootstrap'](https://blog.logrocket.com/tailwind-css-is-it-tomorrows-bootstrap-ebe560f9d00b). - Melanie Richards breaks down, step-by-step, [how the diverse and complex myriad of screen readers access web content](https://alistapart.com/article/semantics-to-screen-readers). - A look at how [base64 encoding font files](https://www.256kilobytes.com/content/show/4674/embedding-fonts-with-css-and-base64) can allow for some moderately interesting workarounds on various blogging platforms. - How you can [use the CSS `env()` feature](https://blog.logrocket.com/why-you-should-use-css-env-9ee719ce0f24) and a PostCSS plugin to share the same variables between CSS and JS in a single file. A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom