It’s a fun little soundbite to talk about how the web is responsive right out of the box. With no authored CSS at all, a website will flow to whatever screen width is available. If your site isn’t responsive, you broke it.

Well that’s almost true, but as Adam Morse says in this new project:

HTML is almost 100% responsive out of the box. These 115 bytes of css fix the ‘almost’ part.

Things like images and tables can have …

Fluidity is a post from CSS-Tricks

Continue reading →

Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 to 2, the column probably temporarily gets wider than it was, even though the screen is narrower. It would be preferable when writing the media query logic for those tabs to consider how much space the widget has available rather …

Thoughts on Media Queries for Elements is a post from CSS-Tricks

Continue reading →

Mark Otto “derping around with measuring CSS performance”. Nothing looks particularly concerning to me, to the point where I would change how I do things. The most surprising numbers were in background vs background-color, but Paul Irish debunks that a bit.

There must be something in the water as Ben Frain has dug in a little bit on CSS performance as well. I like Ben’s soundbite:

With CSS, architecture is outside the braces; performance is inside

This is …

css perf is a post from CSS-Tricks

Continue reading →

It’s worth noting that the srcset attribute for the img element has landed in Chromium (Chrome will get it in 34, Opera 21). Their example: <img alt="A rad wolf." src="pic1x.jpg" srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x"> And:

Stay tuned for the <picture> element

We needed this. The fight was arduous. The solution is good. Other browsers will be on the way. This is notable as once a browser supports something, the tendency is for it to always be supported. Plus …

srcset in Chrome is a post from CSS-Tricks

Continue reading →

Responsive design is a pretty well defined strategy, but how you come at it can vary quite a bit. Brad Frost covers the angles.

Direct Link to Article — Permalink…

Responsive Strategy is a post from CSS-Tricks

Continue reading →

Jeremy Church:

While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.

Jeremy tends to favor em, because of the ability to control an area of a design. As in, scale the type in that specific area relatively. I have tended to like rem because of the ability to scale type across the entire page easily, but I’ve gotten into issues where that wasn’t good enough control …

Confused About REM and EM? is a post from CSS-Tricks

Continue reading →

I followed this guide by Mark Goodyear to try Gulp (a Grunt competitor) out. I don’t use either of them at a level where I’m qualified to have a strong opinion about betterness. They both work for me. I do enjoy the piping in Gulp how you say “take this, do this, this, and this, then put it here” – rather than configuring a source and destination on each thing like in Grunt.

One hiccup I faced: I was running …

Getting started with Gulp is a post from CSS-Tricks

Continue reading →

On the heels of Håkon Wium Lie’s condemning of CSS regions, Sara Soueidan writes about all their benefits. Having read both now carefully, I think Hakon is wrong on each point and CSS regions are quite useful.

Paramount to the discussion:

CSS Regions are not a layout feature — they’re a fragmentation feature

Whatever any of us think, Blink is going to yank out early support for regions, mainly citing performance reasons. Weird to me: why was this reported on …

CSS Regions Matter is a post from CSS-Tricks

Continue reading →

I’m of the opinion that you probably usually do need jQuery (I explain why many times in my latest course on it).

But I’m also of the opinion that reference guides like this a super cool and useful for those of us who came into the world of JavaScript through jQuery. I’ll probably reference this thing a zillion times.

Direct Link to Article — Permalink…

You Might Not Need jQuery is a post from CSS-Tricks

Continue reading →

If you need to change the styles of some elements using jQuery, you might use .css(), but that applies inline styles and we generally don’t like that. You could add/remove/change a class name to control the style, which is better, but then still only works on matching elements that are currently in the DOM.

This neat mini jQuery plugin by Danny Povolotski actually injects real CSS on the page so all (even future) matching elements get that style. Kinda …

veinjs is a post from CSS-Tricks

Continue reading →