MyFonts sells fonts that you can use on your websites directly through @font-face. They are a one-time fee - no subscriptions or recurring payments. Host the files however you would like, there is no third-party to rely on. Not only that, but you can try any font on your site free for 30 days.
Need some inspiration? Browse the 50 most popular webfonts.…
Inspired by Mark Otto's tour of GitHub's CSS and Ian Feather's tour of Lonely Planet's CSS, I thought I would join the party and talk about how we do CSS at CodePen.…
The following is a guest post by Matthias Christen and Florian Müller from Ghostlab. Ghostlab is cross-browser cross-device testing software for Mac and PC. One of the things I'm very impressed Ghostlab can do is sync the events from one browser to all the others. Scroll one page, the others you are testing scroll. Click somewhere on one page, that same click happens on the others. I asked them about how the heck it does that when there is …
When you change a CSS properties value, the browser needs to react to your change. Some values change the layout of the page. For instance, a change in width requires the browser to update layout, then "paint" any pixels that have changed, then "composite" them together. That's a lot of work. Some CSS properties can be changed more inexpensively. For instance, a change in background-image doesn't require any layout changes, but does require paint and composite.
Paul Lewis did all …
Mark Otto takes us on a tour of the CSS of GitHub.com. So great to read a straight-talking bit like this, warts and all.
This is 90% the same as we do things at CodePen. One major difference is that they combine all their CSS into two files and just serve them on all pages. I suppose that way once you've visited any page of GitHub.com, you've browser-cached all the CSS you'll ever need there. I have tended to go …
The following is a guest post by Katy Decorah (edited by Jason Morris). Katy was researching CSS columns and how they can work responsively, as there wasn't much information she could find out there on the subject. So, like a hero, she wrote it all up. Here's Katy:
With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content …
The following is a guest post by Tobias Günther. Together with his team, Tobias creates Tower, a Git client for Mac. I personally use it every day. Just this week, they released version 2 of Tower, which I was a beta tester for. I'll let him explain all about Tower, why they created it, and what's new in this version.…
Andreas Bovens put together this epic recipe list for <picture> / <img srcset>. There are four scenarios:
Then Andreas shares what the code would look like for all of those plus any …
Mathias Bynens is the master of finding, investigating, and playing with quirky (yet often valid) bits of CSS and HTML.…
A huge pile of information about SVG.…
The overall point here by Harry Roberts is to keep the specificity on your selectors as low as you can. The end result of that effort is:
I'm a big fan of resetting box-sizing to border-box, so much that we have a special day of the year around here. But there is a little adjustment to setting it that seems like a pretty good idea.…
The following is a guest post by Ben Edwards. I saw Ben tweet about a simple Sass @mixin that allowed you designate bits of CSS as being "critical" - the idea being to load that critical CSS first and defer the loading of the rest of the CSS until later. A clever idea, and one that is getting very popular in the web performance crowd. I thought I'd get Ben to introduce these ideas in more detail for us.…
Clever work by Alex Sexton to analyze CSS and find colors that are so close to each other they should probably be combined. You know, for efficiency and consistency. …
Ughck, accidental horizontal scrollbar, amiright?
That can be a pain, but you can usually find the offending element by surfing around the ol' DevTools and selecting elements until you find something that extends too far over to to the right (off-page to the left doesn't tend to trigger a scrollbar the same way) and adjusting it.
Sometimes I use the "Delete Node" feature of DevTools to remove stuff from the page until the scrollbar goes away. …
The following is a guest post by Zachary Brady. Zachary is about to take us on a beginner's journey using PHP to do some things that us front end developers sometimes need to do. To me, this kind of thing doesn't make us back end developers, but more resourceful front end developers. Zachary also focuses on PHP here, but the same concepts are available in any back end language.…
There is a CSS property for tables that, it seems to me, is well-supported, little known, and super useful. It changes the way that tables are rendered such that it gives you a sturdier, more predictable layout. …
Simplest possible examples of HTML, CSS and JavaScript.
by Sam Dutton.…
The following is a guest post by Ty Strong. Ty noticed a curious lack of information on the <time></time> element here on CSS-Tricks and I agreed. Can't let that happen! Take it away Ty.…
Make data visualization maps directly in your browser for free! Use the visual map editor to create geographic infographics for your website or for use in presentations. Your maps will work everywhere, including mobile devices, with no limitations on use. Only pay for advanced features like auto-updating maps or for a professional consultation.…
As a beginner, understanding how the different languages you learn interact with each other can be confusing. I thought we could pair up a variety of languages to see where they intersect and communicate. …
... it is suggested to add the named color 'rebeccapurple', for value #663399, to CSS Color Level 4. This is a tribute to Eric Meyer's daughter who recently passed away and a mark of support from all the Web community to Eric. I requested to ping Eric to be absolutely sure he is ok with this; he responded "he was honored by the gesture, and would love to accept it".
I'm glad we work in a field that isn't so …
The following is a guest post by Adam Lichtenstein. Adam works at Wufoo, a web app for building web forms, so you can imagine the need for testing forms is at least double what the rest of us need. Adam took a different road than I took, so I'll let him share.…
This is a perfect example of making a case for new language features. Not just a vague "element queries! that would be awesome!" but laying out a real-world scenario, what we have to do to achieve it now, and why that's not ideal. Of course there are big challenges (see this and this) but those debates can be held elsewhere and not muddy the "why we need it" explanation.…
A reader recently wrote in and (essentially) asked me:
Is there any reason to use the async attribute when the script is already at the bottom of the page?
I'm not a master at this stuff, but this is how I understand it...…
Here's a (lightly edited) real email exchange I just had with someone in my family. I thought it would be worth sharing.…
One time someone told me their biggest problem with SVG icons is that they didn't match the color of text they were by. In fact it was such a big problem for them, that despite seeing the advantages of SVG icons they were sticking with icon fonts. I didn't think of it at the time, but there is a pretty easy solution for this.…
Sara Soueidan lets us know translateZ(0); is out and will-change: transform; (et al) is in. The general tips being: use sparingly, apply before you need it, be honest about what really needs it.
There is some backlash about this, mostly centered around the idea that browsers should be handling this for us. The opposition saying it's too hard for browsers to know, so this is essentially browsers and devs meeting in the middle. Sounds a lot like the responsive images …
Imagine you have a set of breakpoints you have defined for your design that adjust the layout. Now you need to mimic those breakpoints in JavaScript, because you are choosing to load some dynamic content at that breakpoint. Now you're maintaining that breakpoint at two different places in your code. Inefficient and error prone.
This idea by Nate Hunzaker allows you to define those breakpoints in a JSON file that can be used by Sass as well as JavaScript. And …
Reader Hendrik Maus wrote in asking me about how I value typing skills and suggested running a poll on it. Good idea, Hendrik! I love polls that unearth some interesting data around developer opinions and skills. There are lots of ways we could ask it, but we're going to try this way:
How much do you value your keyboard typing skills?
Not so much "how good are you?" but "how important do you think your skill is?" It was kinda …
A poll has been running here regarding sharing buttons. We asked it this way:
This best describes how I share links on my social media site(s) of choice:
12.5 thousand CSS-Tricks visitors voted. …
There is a good chance there is a bunch of forms on the websites you work on. Login and signup forms, payment forms, contact forms, comment forms, etc. It's a good idea to test these forms. Certainly automated tests are a good idea. Backend tests that process the form data and test the results. Frontend tests that test the functions there are doing what you expect.
But then there is manual testing. Like, I want to test this with my …
I link this up not because I think we all need to know trigonometry in our day to day CSS worker lives, but because: holy crap Ana Tudor does amazing stuff with Math and Sass which results in some capital-A Art and I'm sure there are more of you out there that would be interested in following her work.…
Greg Smith isn't advocating we start just slapping on * { overflow: auto; } into all our existing projects. But if we start a project with this, there are a number of advantages, like not needing to use a clearfix or worrying about collapsing margins. Of course sometimes you want a different overflow behavior, but you can just set it like you would anyway.
See the comments about inheriting the value rather than setting it.
Sometimes these things catch …
You could design an icon set where the icons all had the exact same aspect ratio. But that's probably not typically going to be the case. The container around a little beaker icon might be tall and narrow. The container around a little fish perhaps short and long. You probably shouldn't have to think too much about that, but unfortunately you kinda have to when you use an SVG icon system as I've described in the past, because you need …
The following is a guest article by Chris Scott. Chris takes us through a great use case for the Shadow DOM. As designers, we may want to style something in a certain way, but sometimes end up having to go to war with HTML, CSS, and JS to get it done. And even then, the results can be weighty, hacky, and unsemantic. Shadow DOM might be able to save us from that, giving us a fresh place to use …
Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word.
This is something we might tell a graphic designer switching from print to web to avoid. It's too finicky. Too much touchy, unscalable absolute positioning. Too much risk from different font rendering behavior.
But with inline SVG, we …
Say you've designed an HTML email with 3 columns. Because of limited and weird CSS support in email clients, email design is done with tables. That 3 column design looks great on large-ish screens, but it squishes awkwardly on small screens. Theoretically a media query would save us here, but as we can't even count on floats we sure can't count on those. There is still a way though.…
Async is still cool (<script async src="script.js">), but the one where you create a script element with a src and inject it isn't anymore. There are a few gotcha's though, so make sure to read Ilya's whole article.
I made sure to update my article.…
Inline SVG is an awesome way to use SVG because, among other reasons, the individual shapes that make up the graphic can be scripted and styled. The shapes are right in the DOM. But does that mean we have to define those shapes right in the HTML on every page? Nope, we can <use></use> to reference them from elsewhere. Ideally, that "elsewhere" is an external file, because that means that file can be cached by the browser, efficiency!…
The following is a guest post by Philip Walton (@philwalton). He is going to explain why stopping event propagation isn't something you should do lightly, and probably something you should avoid altogether.…
Worth mentioning here: I updated the Complete Guide to Flexbox here on the site that Hugo Giraudel originally helped me with. The idea was to have the complete set of information there, but quickly get to the references to the properties, what they do, and which elements they go on.…
I don't always write CoffeeScript, but when I do, I'm probably using jQuery too; I always forget the syntax for stuff. So I'm going to write it all down here so I can reference it until I memorize it.…
Léonie Watson with a much-needed reference on how to do a good job with SVG accessibility. A couple of takeaways: 1) Use it, the sharp clarity of SVG is good for low vision folks. 2) Inline SVG offers better accessibility 3) Use <title> and <desc>. Plus several more you should definitely read about.…
Super group hug and jumping high fives for everyone. I was honored to accept the Outstanding Contribution award for The Net Awards this year. The entire internet got to vote in the first round, then a select group of peers voted in the second round, so that's makes it a double-special thing to win.…
oEmbed is a neat little technology that allows for rich content to be embedded into other content very easily. You paste a link to the "thing" and, when published, that link magically transforms into something much more useful than a link. A quintessential example is a link to a YouTube video. Just drop the URL to a video in a blog post, and it will transform into an embedded version of that video. Flickr URL... turns into an embedded photo.…
The following is a guest post by Pankaj Parashar. Pankaj has written here before, last time about the progress element. I'm happy to have Pankaj back, this time to tackle the idea of showing reading progress (or really, a scroll position indicator) on websites, which has been a mini-trend lately.…
It's pretty common to use SVG within an anchor link or otherwise "click/tappable thing" on a web page. It's also increasingly common that the SVG is inline <svg></svg>, because it's often nice having the SVG in the DOM since you can style it with CSS and script it with JS and such. But what does that mean for click events?…