What it’s like browsing the web without CSS

#389 — May 1, 2019

? Frontend Focus

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 — 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

Design for Developers ? New Course by Sarah Drasner — 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 — 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 — 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? — 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) — Join the most energizing community for developers. Work from anywhere with the world’s leading brands.

X-Team

Senior Web Engineer – Onefootball (Berlin, Germany) — 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? — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

? Tutorials & Opinion

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 — 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 — 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 — Use JavaScript to make links do magical things, sure, but don’t break them altogether.

Remy Sharp

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 — Creating an experimental “reveal” element for interesting page transition effects.

Mary Lou

? Tip of the Week

supported by

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 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 in the Safari 12.1+ but Firefox support is imminent and a Chrome implementation is in development.

Andy Clarke has an excellent practical write-up of how this media query can be put into practice in more elaborate ways.

This week’s tip is sponsored by Percy, the all-in-one visual testing platform. Replace manual QA and catch visual UI bugs before your customers do.
Get started for free.

? Code and Tools

Fontanello: See Font Info from Web Pages on the Fly — 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 — Provides an image of the viewport, any metadata, and a snapshot of the DOM. Here’s the direct Chrome Web Store link.

Wing Leung

Get the Fastest Website Deployments. Get Started Free

Buddy sponsor

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

Our Own Thing

? Upcoming Events

CityJS Conference, May 3 — London, UK — Meet local and international speakers and share your experiences with modern JavaScript development.

Frontend United, May 16-18 — Utrecht, Netherlands — A yearly, non-profit, developer-first, community-focused conference.

Front Utah 2019, June 6-7 — Salt Lake City — 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 — A one-day conference of practical design and frontend talks, featuring eight speakers (preceded by a workshop day).

DEVit, June 9-10 — Thessaloniki, Greece

CSS Day, June 13-14 — Amsterdam, Netherlands — 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 — A one-day, one-track conference for web designers and developers.

?? Just for fun…

Introducing CSSBattle: The First CSS ‘Code-Golfing’ Game — 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.

Kushagra Gour

Source link