---
title: "What it's like browsing the web without CSS"
publication: "Frontend Focus"
issue: 389
published_at: "2019-05-01"
canonical_url: "https://frontendfoc.us/issues/389"
---

This week's HTML, CSS, browser, and frontend news       

#389 — May 1, 2019 

[Read on the Web](https://frontendfoc.us/issues/389)   

🚀 Frontend Focus 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/imw2n5uwpgw1gnkgwnhb.jpg)](https://css-tricks.com/that-time-i-tried-browsing-the-web-without-css/) 

(Image: [CSS Tricks](https://css-tricks.com/that-time-i-tried-browsing-the-web-without-css/))  

[That Time I Tried Browsing the Web Without CSS](https://css-tricks.com/that-time-i-tried-browsing-the-web-without-css/) — This is very much a ‘what if’ experiment, but Jon explains how the exercise can highlight some accessibility considerations — concluding that _“CSS is really a layer of progressive enhancement”_. 

Jon Kantner   

[Revisiting `prefers-reduced-motion`, The 'Reduced Motion' Media Query](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/) — Most major desktop browsers (except Edge) now support `prefers-reduced-motion`, a type of media query that lets you style things differently for users for whom things like elaborate animations, flashing images, or parallax effects may be disruptive. 

Eric Bailey   [![\](https://copm.s3.amazonaws.com/d93a6cf7.jpg)](https://frontendmasters.com/courses/design-for-developers/) 

[Design for Developers ✨ New Course by Sarah Drasner](https://frontendmasters.com/courses/design-for-developers/) — Become more self-sufficient for the entire process for execution, from concept to design to implementation. Understand the rules for designing and learn to create complex and beautiful front-end experiences. 

Frontend Masters sponsor   

[Digging Into the `display` Property: Box Generation](https://www.smashingmagazine.com/2019/05/display-box-generation/) — A look at the values for CSS’s `display` property that control ‘box’ generation and particularly those instances where you _don’t_ want any boxes at all. 

Rachel Andrew   

[Perceived Velocity through Version Numbers](https://daverupert.com/2019/04/perceived-velocity/) — How version numbering effects technology choices, plus why the author thinks we need HTML6 and CSS4. 

Dave Rupert   

[Google Docs Showing Edge Chromium Users 'Unsupported Browser' Message?](https://twitter.com/tomwarren/status/1123066219165245440) — Our guess is that this is accidental, but the idea of certain (modern) browsers not being supported by mainstream webapps makes many developers bristle. 

Tom Warren on Twitter  

💻 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   

[Senior Web Engineer - Onefootball (Berlin, Germany)](https://company.onefootball.com/careers/80) — Join our team of engineers and help redesign and/or improve our main website and services to enhance our user experience. 

Onefootball   

[Have You Tried Vettery?](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. 

Vettery  

📘 Tutorials & Opinion 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/r2xbnt0unbmxjps9our8.jpg)](https://css-tricks.com/oh-the-many-ways-to-make-triangular-breadcrumb-ribbons/)  

[Oh, The Many Ways to Make Triangular Breadcrumb Ribbons](https://css-tricks.com/oh-the-many-ways-to-make-triangular-breadcrumb-ribbons/) — This design element is quite common on multi-step forms and processes. This post goes into rather extreme depth on four ways to produce them. 

Silvestar Bistrović   

[Essential Guide for Web Performance Optimization](https://uxplanet.org/essential-guide-for-web-performance-optimization-1b883d638a1) — This first in a series focuses on optimizations for the “number one cause of bloat on the web” — images. 

Nick Babich   

[Create An Animated Scroll Cue](https://cssanimation.rocks/scroll-cue/) — Sites often have a subtle cue at the bottom of a page to hint at scrollable content - here’s how to animate it with CSS to draw attention. 

CSS Animation   

[How I Failed the `<a>`](https://remysharp.com/2019/04/04/how-i-failed-the-a) — Use JavaScript to make links do magical things, sure, but don’t break them altogether. 

Remy Sharp   

[Tips for Technical Interviews](https://csswizardry.com/2019/04/tips-for-technical-interviews/) — Advice on how best to prepare for and survive a technical interview. 

Harry Roberts   

[How to Create and Animate Rotated Overlays](https://tympanus.net/codrops/2019/04/18/how-to-create-and-animate-rotated-overlays/) — Creating an experimental “reveal” element for interesting page transition effects. 

Mary Lou     

💡 Tip of the Week  

supported by [![\](https://res.cloudinary.com/cpress/image/upload/v1556618212/i1371s0jdowoyrsgga2r.png)](https://percy.io/?sponsorednewsletter&utm_source=frontendfocus&utm_medium=sponsored_newsletter&utm_campaign=190501)      

**Automatically applying a dark mode to your site** 

It's increasingly common for modern operating systems to offer some form of alternative theme, such as switching the appearance of apps and system elements to have a 'dark' look. 

The jury [is out](https://www.youtube.com/watch?v=bCaFRN3aaP8) on whether this is any easier on the eyes, but while we wait for any conclusion, here's something you can do to meet a user's preference. 

The `prefers-color-scheme` media query is a new way to deliver specific styling based on a user's preference, and you can currently use the media query against either `light` or `dark` preferences like so:   

@media (prefers-color-scheme: dark) {
 body {
 background: black;
 color: white;
 }
 }    

This currently [only works](https://caniuse.com/#search=prefers-color-scheme) in the Safari 12.1+ but Firefox support is imminent and a Chrome implementation is [in development](https://www.chromestatus.com/features/5109758977638400). 

Andy Clarke has an excellent [practical write-up](https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode) of how this media query can be put into practice in more elaborate ways.  

This week's tip is sponsored by [Percy](https://percy.io/?sponsorednewsletter&utm_source=frontendfocus&utm_medium=sponsored_newsletter&utm_campaign=190501), the all-in-one visual testing platform. Replace manual QA and catch visual UI bugs before your customers do.
[Get started for free](https://percy.io/?sponsorednewsletter&utm_source=frontendfocus&utm_medium=sponsored_newsletter&utm_campaign=190501).    

🔧 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/yfoxpbcuhk0awgr7kstt.jpg)](https://fontanello.oktavilla.se/)  

[Fontanello: See Font Info from Web Pages on the Fly](https://fontanello.oktavilla.se/) — A browser extension (for Chrome and Firefox) that makes it easy to see the typographic styles of any text in the browser via the context menu. I use this a lot on pages where I like the text. 

Oktavilla   

[save-page-state: A Chrome Extension to Save The State of A Page for Further Analysis](https://github.com/vrtdev/save-page-state) — Provides an image of the viewport, any metadata, and a snapshot of the DOM. Here’s the [direct Chrome Web Store link](https://chrome.google.com/webstore/detail/save-page-state/aokllhajmkihfihciggkmpgdhgecgaic). 

Wing Leung   

[Get the Fastest Website Deployments. Get Started Free](https://buddy.works/?utm_source=sscpff&utm_campaign=sscpff0105&utm_content=bl) 

Buddy sponsor   

[Essential Technical SEO Audit Tools](https://jameshubbardmarketing.co.uk/seo-blog/essential-technical-seo-audit-tools/) — A detailed resource with info on plenty of in-depth website analysis tools (organised by their primary function). 

James Hubbard   

[GradPad: A CSS Gradient Generator and Gallery](http://ourownthing.co.uk/gradpad.html) 

Our Own Thing   

🗓 Upcoming Events  

[CityJS Conference, May 3 — London, UK](https://cityjsconf.org/) — Meet local and international speakers and share your experiences with modern JavaScript development.   

[Frontend United, May 16-18 — Utrecht, Netherlands](https://www.frontendunited.org/) — A yearly, non-profit, developer-first, community-focused conference.   

[Front Utah 2019, June 6-7 — Salt Lake City](https://www.frontutah.com/conference/) — Two days of learning better ways to work together with your team and be inspired to grow your career in UX or Product Management.   

[Pixel Pioneers, June 7 — Bristol, UK](https://pixelpioneers.co/events/bristol-2019) — A one-day conference of practical design and frontend talks, featuring eight speakers (preceded by a workshop day).   

[DEVit, June 9-10 — Thessaloniki, Greece](https://devitconf.org/)   

[CSS Day, June 13-14 — Amsterdam, Netherlands](https://cssday.nl/2019) — Features eight world-class sessions by eight world-class speakers about curious, 'badly-known', or otherwise interesting CSS features.   

[CSSCamp 2019, July 17 — Barcelona, Spain](https://csscamp.tech/) — A one-day, one-track conference for web designers and developers.    

⛳️ Just for fun...  

[Introducing CSSBattle: The First CSS 'Code-Golfing' Game](https://medium.freecodecamp.org/introducing-cssbattle-the-first-css-code-golfing-game-88b7518df618) — The aim of the game is to replicate an image with the smallest possible amount of CSS (and climb the leaderboards). You can [play here](https://cssbattle.dev/). 

Kushagra Gour         

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