Article Archives

7 comments

Get Out the Vote, CSS Style!

The United States general election is tomorrow! New leaders — including a new president — will be elected to office on November 8 after citizens make their voices heard by casting votes for candidates.

Where does CSS-Tricks fit into the election? This is far from being a place to discuss politics, though we do admit to the occasional dive into office politics such as helping teams have productive discussions about code and how we define our roles in the workplace.…

3 comments

Notes from CSS Dev Conf 2016

I've attended every single CSS Dev Conf, five years running now. I've always particularly enjoyed conferences that have a somewhat narrow focus. Since this conference is, no surprise, largely focused on CSS, I think it serves as an interesting state of the union of CSS style conference every year, for me at least.

In years past themes have emerged like: preprocessors, architecture, testing, performance... last year I'd say it was SVG. …

Demystifying Public Speaking

A new book by Lara Hogan includes some of my favorite advice about public speaking:

As you stand on the stage, remember: your audience is anticipating you’ll be successful at giving this talk. To them, everything has been well thought-out and prepared; they walk in assuming (rightly!) they’re going to learn something new or be inspired...and you’re the person who’ll show them how.

More, they want you to be successful and are quite forgiving. In my experience, you only lose …

Web fonts, boy, I don’t know

Nothing like a trip through 2G country to get you thinking hard about web performance. Monica Dinosaurescu:

Listen: it doesn’t have to be this way. You can lazy load your font. It’s 4 lines of JavaScript. 7 if you’re being ambitious.

I still find it fascinating how much we all seemed to hate FOUT, and took steps to fight it, and now are like, "bring back the FOUT!", and largely have.

She suggests async loading, which is good, but …

Improving Perceived Performance with Multiple Background Images

.masthead { /* Might as well let this color show */ background-color: #3d332b; /* As this is loading */ background-image: url(/img/masthead.jpg); }

Harry Roberts levels this up by suggesting using a gradient that looks more like the image that loads:

.masthead { background-image: url(/img/masthead-large.jpg), linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%); }

Will Wallace gets even fancier by creating a Sass @mixin that takes a big array of colors to make an complex gradient that looks even …

10 comments

Things I’ve Learned About CSS Grid Layout

The following is a guest post by Oliver Williams. Oliver has been working with CSS grid layout and has learned quite a bit along the way. In this article he's going to hop around to different concepts that he's learned on that journey. I like this idea of learning little bite-sized chunks about grid layout, through isolated examples where possible. That makes learning the whole thing a bit less intimidating.

3 comments

A Handmade SVG Bar Chart (featuring some SVG positioning gotchas)

Let's take a look at some things I learned about positioning elements within SVG that I discovered whilst making a (seemingly) simple bar chart earlier this week.

You don't have much choice but to position things in SVG. SVG is a declarative graphics format, and what are graphics but positioned drawing instructions? There are plenty of gotchas and potentially frustrating situations though, so let's get down to it.…

8 simple rules for a robust, scalable CSS architecture

I don't disagree on any particular point on this thesis by Jarno Rantanen.

This is the first I've seen this particular naming convention, which seems fine to me, but I'd add that any well-considering naming convention works.

Also, there is this:

Cascading styles will ruin your day, eventually.

A sentiment shared by many these days, and the likely culprit for all the peter-griffin-adjusting-the-blinds.gifs out there in the world. Again I don't entirely disagree, but, there are styles I gotta imagine …

2 comments

My Favorite Halloween Pens

The Halloween game over on CodePen is pretty strong. I've been keeping a Collection of them myself, but so have a lot of other people who put mine to shame. You can even search for Halloween Collections, if you really wanna follow the rabbit hole. Today is the day, so I figured we'd keep the spirit going by picking out some of my very favorites. Some new, some from years past.…

“A Quantum Leap”

Trident ~EdgeHTML
WebKit ~Blink

... and now ...

Gecko ~Quantum

David Bryant:

The high-level approach is to rethink many fundamental aspects of how a browser engine works. We’ll be re-engineering foundational building blocks, like how we apply CSS styles, how we execute DOM operations, and how we render graphics to your screen.

He's saying we'll see it in 2017. Hopefully the hype is real! Mozilla having a super-competitive independant browser engine (as it long has) is very …

Carousels Don’t Have to be Complicated

Over on the MediaTemple blog, I show you how you can make a pretty decent little carousel with just a few lines of code. Here's the entire premise:

Every time a carousel is mentioned in a blog post, it’s a requirement to mention that… say it with me now:

You probably shouldn’t use a carousel.

Jared Smith made a microsite just for it, with research and rhetoric supporting the idea that you shouldn’t use them. Most of that information focuses …

Sponsor: Wufoo

Wufoo is a web form builder. It allows you to build any kind of form and then either link people to it, or embed it right onto your own website (with full design control!)

I just had someone ask me for advice on undertaking the job of building a huge multi-page application form. It had to be secure. It had to ask questions and go to certain pages depending on how to answer other questions. It had to work on …

17 comments

Spooky Dark UX Patterns

Since Halloween is coming up, I thought I’d go through some things I’ve seen implemented on sites that sent a chill down my spine. Dark UX Patterns are things built for the web that are really bad for the user, and actually take time and care to build.…

8 comments

Spoooooky CSS Selectors

Let's get into the spirit a little bit this year with some Halloween themed posts! I'll kick it off with some CSS selectors FROM BEYOND THE GRAVE. Er. CSS selectors that will CHILL YOU TO THE BONE. OK maybe not, but they will be at least kinda weird.…

17 comments

What is the difference between CSS variables and preprocessor variables?

Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables ("CSS Custom Properties") for the same reasons. But there are also some important differences that should be made clear.…

16 comments

Responsive Images in CSS

The term "responsive images" has come to mean "responsive images in HTML", in other words, the srcset and sizes attribute for <img /> and the <picture></picture> element. But how do the capabilities that these things provide map to CSS?…

Why Do Websites Publish AMP Pages?

I cannot tell if you AMP will shake out to have been a good or bad idea for the web.

I can attempt to answer this question though: those sites don't care where you read them. They just want people to read them. Read them. Like them. Trust them. So when they have something to sell (in any sense of the word), they sell it. Losing that attention is more scary than losing direct traffic to one place it publishes. …

You Can’t Detect A Touchscreen

Stu Cox explains that there are a ton of ways you might think you can get a yes-or-no answer on whether a browser supports touch or not:

  • Width media queries
  • Touch-related DOM events
  • Touch-related APIs
  • Pointer media queries

The normal refrain around this is "there are devices that are both, so you'd be wrong on those," which is true, but it's actually more problematic than that. These testing methods are often just straight up wrong.

So:

For layouts, …

18 comments

On Style Maintenance

I was talking to a brilliant engineer friend the other day who mentioned they never get to build anything from the ground up. Their entire career has consisted of maintaining other people's (often quite poor) code.

In a perfect world, we'd all get to write code from scratch, it would work perfectly, and we would put it into a bin in the sky, never to be looked at by anyone again.

We all know that's not how it works. Code …

2 comments

The Challenge of Constructive Criticism and How to Get It

Something that has been on my mind lately is how we talk about the deliverables we work on as designers and developers. There are plenty of times when we want feedback on our projects and turn to our friends, co-workers, colleagues, Twitter, and all kinds of other people for their honest opinions about the quality of our work.

But this can be problematic. The feedback we get is often not what we hoped for. In some cases, it can feel …

WordPress Without Shame

Even-handed take on WordPress by Gina Trapani. I've been unapologetically on WordPress for a long time.

I also can't wait to see what the future of it will be:

Automattic’s React-based Calypso rewrite of the WordPress admin is a clear sign that at least the leaders of the community are trying to reimagine what a WordPress born in 2016 would look like. Eventually? Soon?…

one comment

Websites We Like: October 2016

Another month, another collection of fascinating websites! Here’s a few that have caught our attention lately.…

13 comments

A Priority+ Navigation With Scrolling and Dropdowns

The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the "Priority+ Navigation" concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking and creation of a design pattern, especially when it's working out there in the real world.

one comment

SVG Charting Libraries

I rounded up the ones I know about, mentioned a bunch of considerations you might want to think about when choosing, and linked up some demos.

And don't forget you can create them by yourself, too!…

11 comments

Building a Website Performance Monitor

A couple of months ago I wrote about using WebPageTest, and more specifically its RESTful API, to monitor the performance of a website. Unarguably, the data it provides can translate to precious information for engineers to tweak various parts of a system to make it perform better.

But how exactly does this tool sit within your development workflow? When should you run tests and what exactly do you do with the results? How do you visualise them?…

CSS ICON

Wenting Zhang created 512 (!) icons with just HTML and CSS. Usually just one element, the occasional extra element thrown in, and drawn with things like borders, backgrounds, and box-shadows.

Looks like the same bug bit Wenting that bit Nicolas Gallagher. Taking the shapes that CSS can make and combining them to draw.

Predictably, I'm going to point out that SVG would be a more-ideal tool for this. Less fragile, easier to maintain and style, scaleable, etc. I mention …

SVG & Media Queries

Jake Archibald digs into how bizarrely media queries can behave when embedded into a <style> block inside the SVG itself and then used in a variety of different ways across different browsers. The results are spotty at best.

It would be nice to see this reined in, but I wouldn't worry too much about it in general. Inline SVG doesn't seem to have any trouble and I wouldn't trust an <img> do anything fancy like have internal media queries anyway.…

3 comments

An Interview with Miriam Suzanne

Hey y'all! Welcome Miriam Suzanne. Miriam will be doing more writing around here soon, so we figured an interview would be a good way for you to get to know her first. She's been working with the web for longer than I have, has created some pretty huge open source projects, and has a unique perspective on about everything. Let's get to the chat!…

Beware Smushed Off-Screen Accessible Text

J. Renée Beach:

Over a few sessions, Matt mentioned that the string of text “Show more reactions” was being smushed together and read as “Showmorereactions”.

Turns out a popular technique for hiding content visually (but not hiding it for assistive technology) involved setting width: 1px; which was forcing words to wrap one-word-per-line with "line feed" breaks, which the AT didn't treat the same as spaces.

Facebook had to update their accessible hiding class to include white-space: nowrap; to fix that. …

Progressive Enhancement “Debate”

Nolan Lawson:

I had a slide in my talk that read:

In 2016, it’s okay to build a website that doesn’t work without JavaScript.

The condemnation was as swift as it was vocal.

Response by Jeremy Keith:

That framing makes it sound like it’s a binary choice: either the website works or it doesn’t. That’s not what I’m suggesting. I’m advocating that the core functionality of a website (which can be as simple as reading some text) should be available …

one comment

Declarative Data Fetching with GraphQL

The following is a guest post by Nilan Marktanner from Graph.cool. I don't know about y'all but I've spent plenty of time in my career dealing with REST API's. It's a matter of always trying to figure out what URL to hit, what data to expect back, and how you can control that data. A quick glance at GraphQL makes it seem like it simplifies things both for the creators and consumers of the API. Let's let Nilan explain.

Is jQuery Still Relevant?

It took a minute, but I believe we have arrived at Baby Bear on the jQuery conversation. Some choice quotes from the ensemble cast blog post:

Nathanael Anderson: The biggest negative for jQuery in this day and age is that browsers are a lot more standard in coverage and directly messing with the DOM is slow unless you can do everything at one time; and jQuery was not designed for large change groups.

Todd Motto: Final thing from me: let’s …

7 comments

SVG → Letterpress

I took a class at Bay View Printing Company, the local community letterpress shop I belong to, all about printing with polymer plates. The shop is absolutely full with wood and metal type, and all the accoutrements around that, but polymer plates are not that. You get them made! They can be anything! Sometimes it's fun to stick with the old school setting of type. I like doing that quite a bit. But I was interested in learning how …

Yarn

From the didn't see that coming news desk:

We're pleased to announce the open source release of Yarn, a collaboration with Exponent, Google, and Tilde. With Yarn, engineers still have access to the npm registry, but can install packages more quickly and manage dependencies consistently across machines or in secure offline environments.

Yarn is a new package manager that replaces some of what npm does... that you can install with npm.

So, it's faster. Dion Almaer:

Thanks to …

7 comments

Lots of ways to add an ID to the `body` element

The following is a guest post by Trishah Woolley. Over the years, Trishah has collected a ton of code snippets that do the job of adding IDs and classes based on some variable information, like the URL or data from WordPress. Each of these snippets were either collected from documentation or a similar online resource, or written by Trishah based on standard features of the language and API's involved.

16 comments

Styling Underlines on the Web

Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. Thankfully however, John Jameson gets us up to speed in this guest post.

9 comments

The Annoying Mobile Double-Tap Link Issue

We had a question come up the other day on ShopTalk about regular ol' anchor links on iOS, and some weird situation where you couldn't just tap them once to go to the link, it required tapping the link twice. I've experienced this myself and have been pretty confounded.…

How It Feels Reactions

Jose Aguinaga pinched a community nerve:

The JavaScript community is insane if it thinks anyone can keep up with this.

I heard a lot of Hilarious! So true! reactions. I heard a lot of Nope. This isn't what it's like. reactions, sprinkled with You don't have to use/start with every tool. and Both of these people (in this fake conversation) are kinda jerks.

Some Baby Bear reactions include Tim Kadlec and Addy Osmani. Sacha Greif wrote to me to …

Cicada Principle and CSS

Charlotte Jackson uses this classic clever technique to pseudo randomize border-radius, making irregular circles for a photo grid.

A cicada is a rather grim looking little bug. You may have heard of them. There is a kind called the Periodical Cicada, which simultaneously emerge in masses every 7, 11, 13 or 17 years; they find a mate and then they die. It's not much of a life.

However, the interesting thing is that these numbers are all prime numbers.

Alex …

Normalize (CSS) No More.

Shaun Rashid:

... as I work with building responsive websites where the widening array of devices has changed the way that we design websites, I have fallen back to the age-old statement that answers the question of whether a website needs to look exactly the same in every browser. With the answer to that question, I have found that the reset/normalize stylesheet has become unnecessary.

I wonder how popular not using any sort of reset is already? As you look …

The Easiest Way to Find a New Job

As a highly talented developer or designer, shouldn’t companies apply to you? On Hired the traditional process of finding a job is completely reversed. Hired expedites the job search process through an efficient system of:

  1. Companies competing for top talent with visibility into a candidate’s traction on Hired, driving rapid turnaround times from interview to final offer.
  2. Free personalized support to ensure your next job is your dream job. On Hired our Talent Advocates have your back, whether it’s negotiating

Responsive Image Breakpoints Generator

I'm guilty of using responsive images by taking a high res image and downsizing it a few times kinda randomly and using those as the srcset images. Basically the same "desktop", "tablet", "mobile" thinking I can also be guilty of with breakpoints.

Soooo what is the perfect way to do responsive images? Ideally we'd be sending the exact image that any device needs. If a device/browser/design combination requires an image to be 457px wide, in a perfect world, we'd send …

16 comments

Will we be flattening our HTML for CSS Grids?

I was watching Rachel Andrew talk about CSS Grid Layout yesterday at An Event Apart. Grid is amazing and the day will soon come where it's a dominant web layout tool of choice. That day isn't here yet though, as no stable browser is shipping the latest version of the spec (it's behind a flag at best).

The good news is that, as of just a few days ago, the spec is really stable and has entered "Candidate Recommendation" …

A Redesign with CSS Shapes

CSS Shapes is like the perfect example for progressive enhancement these days. Kinda like border-radius was. Older browsers have square corners! Who cares! CSS Shapes allow you to wrap text irregularly - like along the path of a circle().

Eric Meyer uses it on a production page and shows how it works. Here's some code I snagged from the CSS on the site itself showing it only being applied on large screens with support:

@media only screen and (min-width:
14 comments

The SVG `path` Syntax: An Illustrated Guide

The <path></path> element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a mini syntax all to itself. It can look pretty indecipherable. It's a ton of numbers and letters smashed together into a long string. Like anything computers, there is a reason …

text-spinners

A clever idea for text-based spinners in CSS. You set the "keyframes" in the content, and cycle through them by moving the line of text to the left in the actual keyframes.

<button>Loading <span class="loading"></span></button> .loading.bar2::after { content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█"; animation: spin8 2s steps(8) infinite alternate; } @keyframes spin8 { to { transform: translateY(-12.0em); } }

This is a whole repo of them by Max Beier. I've isolated one of them here:

See the Pen text-spinners by Chris Coyier …

We have a pretty good* newsletter.