Treehouse: Grow your CSS skills. Land your dream job.

HTML vs Body in CSS

The difference between <html></html> and <body></body> is easy to overlook. It seems to be one of those things that falls into the category of trivial. Admittedly, I have a bad habit of applying all global styles to <body></body> and, when that falls short, I move to <html></html> without thinking about it.

There are differences, however, and it's a good idea to be aware of them regardless of whether we're CSS veterans or rookies. We'll go over those in this post …

Read Article →

Sponsor: Mack Weldon 

Guys. (Literally guys this time, sorry gals.)

I don't particularly like clothes shopping. So I don't. 95% of the clothes I own I buy online. But I also like nicely made clothes. It's not a splurge. They last longer, are more comfortable, and end up being a more economical buy.

That's why I'm glad there are companies like Mack Weldon that make high quality clothes that used to suck to shop for: underwear, undershirts, and socks. This is what they have to say specifically about their underwear:

  • We thought underwear could be better, so we made it by combining old school quality with new technology.
  • We spent 10,000 hours creating better underwear, starting with our own new fabric we call 18 Hour Jersey. The fabric sits for 18 hours before it's cut, giving it time to naturally breathe and acclimate.
  • Features like a no-roll waistband, stay-put legs and mesh cools zones make these very comfortable even after a full day's wear.

They want you to be comfortable in great underwear, so if you don't like your first pair, they'll send a different size or give you a refund. No need to send anything back.

Cut and Copy (from JavaScript) 

Matt Gaunt shares that IE 10 and bleeding edge Chrome and Opera how support document.execCommand('copy'); and friends, which can make for some mighty convenience UX opportunities.

Using Chrome DevTools to Debug JavaScript in Any Browser with Ghostlab 2

The following a guest post by Andi Dysart and Matthias Christen of Ghostlab. I was pretty impressed when I heard that the newly-released Ghostlab 2 could do this. I think a lot of us developers use Chrome because the DevTools are so good, and it sure would be able to use them in other browsers, even on mobile devices. And why not? Chrome DevTools are a part of Blink, which is open source, right? We just needed a tool

Read Article →

More Control over Text Decoration

Marie Mosley just finished up a revamping of the text-decoration property (and friends) in the Almanac. You're probably aware of this property. For instance, most default browser styles include underlined links by way of text-decoration: underline; - which you can remove with text-decoration: none;.

But you may not be aware that there is more you can do with this property, as well as various sub-properties offering more fine-grained control.…

Read Article →

Chronicle XXII

We put up a proper Team page. CSS-Tricks isn't just me, but a whole team of part-time staff that keep this ship sailing. That includes writers. We've always had guest posts, but now, for the first time, you'll be seeing articles not written by me that also aren't "guest" posts, because they work here! Example. Notice it doesn't have an introduction written by me like a guest post would. We'll get proper author archives up soon. …

Read Article →

Be Careful with will-change 

The concept behind the will-change property is to stop using hacks like transform: translateZ(0) to tell browsers where to optimize and standardize it. The typical, understandable gripe is that this complicates CSS. Shouldn't browsers be smart enough to do these optimizations, rather than leaving it up to us authors? To which browsers say: it's near impossible to heuristically determine these things. Much like the sizes property in responsive images - just telling the browser allows it to act on that information much sooner. Browsers also say, it's not CSS getting more complicated, it's pages. Another gripe is that the suggested use of applying and removing will-change with JavaScript as needed is asking too much.

All that warm-up to link to Thierry Koblentz's article in which he warns that will-change can create new stacking contexts, which can be unexpected and create cross-browser differences.

Override Gmail’s Mobile Optimized Emails

Many emails are designed with a large screen in mind. Text that looks great on a large screen can be difficult to read on a mobile device, though. If Gmail deems that the font-size of any text in an email is too small to be legible, it will increase the size and flag the message. That’s pretty nice. What could have been illegible is made legible, eliminating the need to pinch and zoom our screens. It can also be a little frustrating. Read Article →

138: Walking Through an HTTPS Conversion on WordPress

We just recently moved to "HTTPS everywhere" right here on CSS-Tricks. I wrote up a blog post detailing the steps to get there. This video is a companion to that, talking through the steps, as I know some folks prefer that style and the type of detail it affords.

I should note that I'm not an expert about this stuff. I'm sure there are different types of SSL certificates that can be installed in different ways and that offer different …

Watch Video →

More Blog Posts →