Articles by CSS Tricks from December 2015

A reader writes in:I've seen done beautifully, but I'm having a hard time finding any articles on best practices. I try to steer clients away from wanting video background even though it's hard to ar...

The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using f...

Weve talked about SVG quite a bit here on CSS-Tricks, but one area we havent quite touched on is email. Now that browser support for SVG is all in the green, it would be easy to assume that we can sta...

A reader writes in:Is there anything on your site that shows me how to make an SVG clickable using CSS? As in, I have an SVG and I click on part of it and it should reveal an outline on that part of t...

Maciej Ceglowskis latest talk is all about front-end performance, the advertising bubble and surveillance on the web. Its interesting that he argues how each of these separate problems are really inte...

Before you get caught up in holiday sweets and ugly sweater parties, be sure to look at Creative Market's new 20% off deal covering everything from stellar brush fonts to detailed textures to stunnin...

I don't think it causes confusion, but there doesn't seem to be any consensus on how we write out the word front end. I had to make a choice right there. My preferred style, for now, is just that: fro...

Typekit has updated the WebFont Loader project with support for the new CSS font loading API:Before the introduction of the native API, we detected font loading by inserting test elements in the page....

Our latest poll asked:What's the web performance situation on your main project?Then provided five possible answers related to the general attitude of the team as it relates to web performance, rangin...

James Mickens, an associate professor of computer science at Harvard, gave a talk about the various flaws of web browsers and how we might go about making them more secure and robust:To fix the browse...

There are some things Dave and I talk about regularly on ShopTalk. Certain hardware we use. Software we like. Books we recommend. Services that make life easier. We rounded them up into a little list ...

Mat Marquis talk from TXJS 2015 is a rallying cry for performance, responsive images and trying to build websites in the most conscientious way possible:We, as an industry, have nearly decided that we...

Lets Encrypt is an open Certificate Authority, an entity that issues certificates to get your site up and running with HTTPS, a process that has been notoriously difficult. Tim Kadlec gives it a shot....

SMIL, SVGs native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in We...

It's been a few months since I've done a Chronicle post around here. There are the posts in which I catch you up with all the goings on of the site and myself. A roundup of life, if you will.I went to...

Set yourself apart. Get better at what you do today and find out how youll be doing your job in a year or two. [An Event Apart](https://synd.co/1fJqx13)three days of design, code, and content for peop...

CSS animations are rad and the concept is fairly simple. Name the animation, define the movement in @keyframes and then call that animation on an element. If you haven't worked with them, you can leve...

Type aficionado Tim Brown has written a great piece about how to make typographic enhancements with the OpenType features of a web font. These additions can be subtle, such as ligatures and small caps...

By using intrinsic ratios and the picture element, Dave Rupert describes his attempts to stop the clunky page reflow when images load on a page. He also shows us how its possible to style this element...

The following is a guest post by Scott Fennell, a WordPress theme & plugin developer in Anchorage, AK and a regular contributor around here.Let's say you have a client whose business is large eno...

Philip Walton:Native CSS variables werent just an attempt to copy what CSS preprocessors could already do. In fact, if you read some of the initial design discussions, youll see that most of the motiv...

As you can imagine, I ran into some problems. Netflix wouldnt work. Neither would YouTube, at least not without turning on Adobe Flash, which would kind of defeat the point of turning off JavaScript. ...

The following is a guest post by Emil Bjrklund. Filter effects in CSS have been around for a while, and together with things like blend modes, they bring new possibilities for recreating and manipulat...

Flexbox Froggy: A game from Thomas Park where by you learn about differnet flexbox properties and values by positioning a frog.Flexbox Grid Finesse: Heydon Pickering shows off that useful feature of f...

The Iron Yard is one of the worlds largest and fastest-growing in-person code schools. The Iron Yard exists to create real, lasting change for people, their companies, and communities through technolo...

A talk by Ryan Seddon on whats going on beneath the surface of the browser. Its pretty remarkable that, by default, HTML is so forgiving and resilient.Direct Link to Article — Permalink…Ho...

It's difficult to keep track of all of the great talks and conferences happening in our industry. Sometimes you may find out too late that an event is taking place, and it's a real shame when it's an ...

A 2014 article from Information Architects on the process of modern day web design:Make a tree structurePhotoshop the Home, Section, and Article pagesHack on WordPress or one of its cousinsFill in the...

The following is a guest post by Pankaj Parashar. Pankaj is our resident expert on all things <progress> and <meter> and this post is more evidence of that. Here, he walks us through i...

Cole Peters has written a great piece on his work refactoring the TrialReach CSS codebase:A functional approach to CSS has thus far played out really well for us at TrialReach weve significantly redu...

A type lockup is a typographic design where the words and characters are styled and arranged very specifically. Like the design is literally locked in placed. This idea is slightly at-odds with the re...

If you use Illustrator for SVG wrangling, you'll love last night's release. All of the new features make for an easier workflow. Some of them include:Better default code that's easier to hand-editBett...

Donovan Hutchinson kicks off this years 24 ways, the webnerd advent calendar which is always a great way to close off the year.They have an RSS feed, and since I know that 42% of you read this site wi...

Syncano is all about giving creative freedom to the front end developer. Here are a few ways Syncano can make it easier to build apps:Run your own code (Python, Ruby, JavaScript, etc) without setting ...

Sorry the website I just sent you the link to wasn't looking right on your phone. I checked it out too and the layout was pretty jacked up. I personally caused that, as I'm solely responsible for each...