Archive by Author

CSS Code Smells

Every week(ish) we publish the newsletter which contains the best links, tips, and tricks about web design and development. At the end, we typically write about something we’ve learned in the week. That might not be directly related to CSS or front-end development at all, but they’re a lot of fun to share. Here’s an example of one those segments from the newsletter where I ramble on about code quality and dive into what I think should be considered a …


CSS Code Smells is a post from CSS-Tricks

The Output Element

Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick skim and found styles for a rather peculiar element called <output> that I’d never seen or even heard of before.

According to MDN, it “represents the result of a calculation or user action” typically used in forms. And rather …


The Output Element is a post from CSS-Tricks

5 Tips for Starting a Front-End Refactor

For the last two weeks, I’ve been working on a really large refactor project at Gusto and I realize that this is the first time that a project like this has gone smoothly for me. There haven’t been any kinks in the process, it took about as much time as I thought it would, and no-one appears to be mad at me. In fact, things have gone almost suspiciously well. How did this happen and what was the issue?

Well, …


5 Tips for Starting a Front-End Refactor is a post from CSS-Tricks

Mētis

Kelly Sutton writes about programming, working with teams and the relationship to the Greek word Mētis:

Mētis is typically translated into English as “cunning” or “cunning intelligence.” While not wrong, this translation fails to do justice to the range of knowledge and skills represented by mētis. Broadly understood, mētis represents a wide array of practical skills and acquired intelligence in responding to a constantly changing natural and human environment.

Kelly continues:

In some ways, mētis is at direct odds with …


Mētis is a post from CSS-Tricks

CSS font-variant tester

From small caps and ligatures to oldstyle and ordinal figures, the font-variant-* CSS properties give us much finer control over the OpenType features in our fonts. Chris Lewis has made a tool to help us see which of those font-variant features are supported in our browser of choice and I could definitely see this helpful for debugging in the future.

Direct Link to ArticlePermalink


CSS font-variant tester is a post from CSS-Tricks

iOS 11 Safari Feature Flags

I was rooting around in the settings for iOS Safari the other day and stumbled upon its “Experimental Features” which act just like feature flags in any other desktop browser. This is a new feature in iOS 11 and you can find it at:

Settings > Safari > Advanced > Experimental Features

Here’s what it looks like today:

Right now you can toggle on really useful things like Link Preload, CSS Spring Animations and display: contents (which Rachel Andrew


iOS 11 Safari Feature Flags is a post from CSS-Tricks

Designing Websites for iPhone X

We’ve already covered “The Notch” and the options for dealing with it from an HTML and CSS perspective. There is a bit more detail available now, straight from the horse’s mouth:

Safe area insets are not a replacement for margins.

… we want to specify that our padding should be the default padding or the safe area inset, whichever is greater. This can be achieved with the brand-new CSS functions min() and max() which will be available in a future …


Designing Websites for iPhone X is a post from CSS-Tricks

lite.cnn.io

This little website pulls in all the main stories from CNN and strips almost everything from the design; styles, images, fonts, ads, colors. Nada, zilch, gone. At first it looks like nothing but hypertext and it feels like an extraordinary improvement but Sam Saccone made a thread about potential improvements that the team could use to make that experience even faster such as server side rendering and replacing the React framework with something smaller, like Preact.

Either way this …


lite.cnn.io is a post from CSS-Tricks

Basic grid layout with fallbacks using feature queries

I often see a lot of questions from folks asking about fallbacks in CSS Grid and how we can design for browsers that just don’t support these new-fangled techniques yet. But from now on I’ll be sending them this post by HJ Chen. It digs into how we can use @supports and how we ought to ensure that our layouts don’t break in any browser.

Direct Link to ArticlePermalink


Basic grid layout with fallbacks using feature queries is a post from CSS-Tricks