The following is a guest post by Pascal Klau, a trainee from South Germany, who dislikes unnecessary HTTP requests and broccoli. Pascal is going to explain way to use a polyfilling service in such a way that you might get away with not using it at all.…
Say you want an element to be in one state for 9 seconds, and in another state for 1 second, on a loop.
No tweening between the state, just a straight swap.…
The following is a post by Levi Gable. Levi digs into the idea of separating the CMS from the presentation of content within that CMS. As Levi will explain, there is a freedom there that can feel mighty good to a web developer. A website can digest an API and present content in whatever the hot new way to do that is. But even more importantly, an API can serve multiple publishing platforms. Levi demonstrates this as well, by having …
It's a perfectly reasonable to want to style the marker of list items. You know: blue bullets with black text in an unordered list. Or red counters with knockout white numbers in an ordered list.
There is a working draft spec that defines a ::marker pseudo-element that would give us this control.
/* Not supported anywhere; subject to change */
li::marker {
color: blue;
}
It's possible to do this styling now, though, thanks to CSS counters. The trick is …
A new interview series from Preethi Kasireddy and Vivian Cromwell, focusing on "how developer products are made". I was honored to be lucky number three, in which I overshare about CodePen.…
OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.
Support so far: Firefox 26+, Edge 38+ …
Let's say you created a lovely vector illustration in Adobe Illustrator. Or you’ve used Illustrator to finesse some existing graphics. Or for literally any reason at all, you have a file open in Adobe Illustrator that you ultimately want to use on the web as SVG.
There are several different ways of getting SVG out of Illustrator, each one a bit different. Let’s take a look.
TL;DR: Exporting, like File Export Export As... SVG then optimizing is your best bet …
It wasn't that long ago where you couldn't programmatically copy text to the clipboard from the web without using Flash. But it's getting pretty well supported these days. IE 10+, Chrome 43+, Firefox 41+, and Opera 29+, says Matt Gaunt in writing about it on Google's developer site.
Here's the example from that article:
See the Pen Copy Text with a Button (Google Example) by Chris Coyier (@chriscoyier) on CodePen.
That article says it's not supported in …
mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation. Even though mo.js is still in beta, there is already a host of amazing features to play with. Its author, Oleg Solomoka (otherwise known as @legomushroom) creates incredibly impressive demos and tutorials for the library's offerings that you should check out, but in this article we’ll run through a really quick overview of features and tutorials …
One of the interesting things about Media Temple is the breadth of hosting solutions they offer.
Among their least expensive plans is WordPress-specific hosting. Just $20/month, but very powerful and fast hosting, thanks to it being tuned just for WordPress. WP-CLI is installed right on it and it auto-updates WordPress core for you. Not to mention it's all on SSD's, you get SSH access, and you get 24/7 WordPress-certified support.
There are loads of plans that scale up from here, …
If you’ve been working around web development for a while, you’ll know that the web has a need for speed. The truth is simple: speed matters and faster is considered better.
One "easy win" for increasing performance is using a CDN. We’ve discussed this several times at CSS-Tricks. It's easy in that you aren't rewriting a codebase or hand-editing content, but it's an area of performance many of us might overlook because, well, hosting, servers and cPanels, oh my!…
You've been hard at work optimizing your site. You've already done things like lazy-loading Google Maps and been wondering if there was anything else you could do. For example, is there anything we can do to improve the loading of ads? Good news, there is some things you can do. You can respect user's mobile data plan by loading ads only when they are likely to appear in the viewport zone. You can also serve ads in the right size …
A common idiom in our industry is, "You never can predict how the user will use your product once they get it in their hands." If you've ever watched a stakeholder use a website or web application for the first time, you may know this firsthand. I can't count the number of times I've seen a user seemingly forget how to use websites on a mobile device, or try to use it in a way that makes you think, "But …
I absolutely love this idea from Thoughtbot. Just like automated tools that check your HTML for syntax, formatting, validity, or whatever else, FormLinter checks your <form> HTML for best practices. Things like every input having a label, using correct input types, required fields, and more.
Doing all these things right is worth the effort: improvements like these improve accessibility and increase conversions. However, checking this sort of thing by hand is tedious and error-prone.
We were testing …
The SVG we know and love today is "SVG 1.1 2nd edition". SVG 2 is in Editor's Draft status at the W3C, and it's at serious risk of never getting past that, as it's charter may not be renewed before it reaches recommendation status.…
Cool little lib from Atif Azam that allows you to wrap a name in a span and it puts a little 🔊 button to hear the pronunciation. The audio comes from NameShouts. You can't contribute your own pronunciations to NameShouts, best I can tell, but the lib allows you to provide an alternate source.
I made a demo based on the screenshot in the README:
See the Pen Demo of Vocalizer by Chris Coyier (@chriscoyier) on CodePen…
Over 4,400 companies are using Hired to find their next team member and with transparency into each company, you’re empowered to make the right decision about what opportunities you’d like to pursue. Say goodbye to pushy recruiters trying to sell you on roles you don’t actually want. Life’s too short to waste time with companies that are a bad fit, or to find out after months of interviewing that the offer is no good.
Try Hired and let companies apply …
One of the things that I'm really interested in about CSS is the new color-mod function. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can change the color by using something like color: color(black darkness(50%));, without the use of any CSS preprocessor like Sass.
But as the support of these CSS color functions is zero nowadays, we can temporarily use PostCSS and compile them …
Better position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016.
MDN explains it well:
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
Šime Vidas pointed this out in a recent Open Web Platform Daily Digest, and ported over the demo from MDN, which …
As some people might know, I've always loved 3D geometry. Which has meant getting drawn towards playing with CSS 3D transforms in order to create various geometric shapes. I've built a huge collection of such demos, which you can check out on CodePen.
Because of this, I've often been asked whether it would be possible to create responsive 3D shapes using, for example, % values instead of the em values my demos normally use. The answer is a bit …
Potch:
If you absolutely must perform tasks on the main thread (mutating the DOM or interacting with main-thread-only Web APIs), you can now request the browser provide you with a window of time in which it is safe to do so!
... requestIdleCallback allows the browser to wait until it identifies an idle period. An idle period may be a few milliseconds between painting individual frames.
This seems like the kind of thing that becomes a best practice. But how …
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.…
2009: Smashing Magazine article "20 Extraordinary Blogs With Unique Post Designs"
2013: We tested those URL's to see how they were holding up: 18/40 intact
2016: We tested again: 13/40 intact, even with a few returning from the dead …
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. …
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 …
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 …
.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 …
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.…
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.…
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 …
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.…
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 …
We just wrapped up this mini-series, so I figured we'd put a bow on it. Perhaps of interest (and perhaps cathartic) to everyone else out there running small web software businesses. …
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 …
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 …
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.…
I did an online seminar (organized by Shopify) in which I gave my "10 Things You Can & Should Do With SVG" talk. You can watch the video at this link. Sara Chisholm busted it out into an article that covers some of my points and embeds some of the demos.…
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.…
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.…
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?…
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. …
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:
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, …
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 …
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 …
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?…
Another month, another collection of fascinating websites! Here’s a few that have caught our attention lately.…
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.…
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!…
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?…