The following is a guest post by Jeremy Wagner, a web developer, author, and speaker living in the Twin Cities. He's got a new book on web performance. Here we're going to dig into a brand new CSS feature, that once it percolates through the browser ecosystem, will be great for performance.
If you're a regular reader here at CSS-Tricks, chances are good that you're familiar with using web fonts. You may even know a few useful tricks …
Tim Brown with a new (metaphorical) term to describe a value that can fluctuate between two set values:
In canal and river navigation, a lock is a device used for raising and lowering vessels between stretches of water that are at different levels. That’s exactly what our formula accomplishes. Our formula is a CSS calc “lock”.
To fluctuate between a 1.3em and 1.5em line-height depending on the screen width:
line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - …The following is a guest post by Declan Rek, who works as a developer at De Voorhoede, a front end tech agency. A version of this article was originally published on their blog. Declan asked about republishing here, and as it is jam-packed with real world case study performance stuff, I was into it.
At De Voorhoede we try to boost front-end performance as much as possible for our clients. It is not so easy to convince every …
In CSS, attribute selectors have some fairly powerful matching abilities. You can match any attribute and any attribute with exact values, values that start with certain text, contain certain text, end with certain text, etc. This allows you to get pretty weird with a styling "language" if you want to.…
The following is a guest post by David DeSandro. David wanted to offer a new feature in Isotope: staggered animations. Like so many things web, there are lots of ways he could have approached it. Here he looks at some of the possibilities, the advantages and disadvantages of each, and what he ultimately went with for Isotope.…
The following is a guest post by Catalin Rosu, who along with some colleagues, dug up a ton of data about the HTML content of web sites. This is the most recent study of its kind and wildly fascinating to see the results. I find it especially fun to compare the top results to what I would have guessed would have won.
We've all been there. We try to improve our HTML code making it clean, beautiful, and readable. …
This year is An Event Apart's 10th anniversary. In order to celebrate, they are putting on competition called 10K Apart where people show off what can be accomplished in 10kB of data. This isn't a new competetion- its first genesis has been a project called 5k way back in 2000-2002. This year is sponsored by Microsoft Edge and they're giving away $10K in prizes to competitors. The judge panel has top professionals from web development, talented people like Sara Soueidan…
I got an email from Brendan Foster the other day, a developer at the Australian agency The Competition. He was showing me an interesting CSS trick that helped him pull off a layout thing on a website he was helping work on for Margaret River Beverages. I actually thought the whole site was pretty interesting, and the idea occurred to me to jot down my thoughts as I explored the site. He was cool with it.…
Someone wrote in asking how they might get the "original image" when all they had was the data URL version of the image. I'm not exactly sure how you get into that situation, but hey, I woke up in a trunk more than once.
You can absolutely get the original back, by exploiting the wonderful powers of the browser.…
Have you ever seen (or put yourself) some text into a <textarea></textarea> or <input />, not because it was part of a form, but because it made the whole block of text easier to select. Inputs like that have selection boundaries, meaning you can click into them and (for example) Select All and get just the text inside the input.
There is a CSS property that allows us to do that without needing to use a not-particularly-semantically-appropriate form …
The following is a guest post by Dylan Winn-Brown, who shows us a performant way to accomplish this design effect.
Whilst working on a client’s website recently, I was asked to replicate an effect like this.
The following is a guest post by Damon Bauer, who tackles a pretty common web developer job: offering user image uploads. I'd hesitate to call it easy, but with the help of some powerful tools that do a lot of the heavy lifting, this job has gotten a heck of a lot easier than it used to be. Damon even does it entirely in the browser!…
The following is a guest post by Emerson This. This is a guide for web developers interested in integrating Instagram content on websites. It was only a few months ago when Instagram changed what was possible with their API, so this serves to explain that, what is possible now, and examples of those possibilities.…
Matthew Ström on how data tables can be better through things like alignment, rules, labels, backgrounds, and the type of numerals used:
Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining figures are more uniform, and reinforce the grid-like structure of the table.…
None of them have …
Some interesting thoughts from Jeremy Keith about his concerns with Web Components:
Compare Service Workers to web components.
First of all, ask the question “who benefits from this technology?” In the case of Service Workers, it’s the end users. They get faster websites that handle network failure better. In the case of web components, there are no direct end-user benefits. Web components exist to make developers lives easier. That’s absolutely fine, but any developer convenience gained by the use of …
The idea of breaking up your code into smaller bite sized chunks creates an environment that is easy to work in and maintain. That's often thought of as module design, and is a standard for web development these days. I'm going to show you a way you can use module design to better organize your Grunt tasks.…
Bjørn Johansen covers why:
Jake Archibald in the comments:
In hindsight there probably should have been two content types, one that treats SVG has a full document context, and the other as a simple image (how browsers treat SVG in today, which cannot execute script or initiate fetches).
Hear hear.
I also had …
Big news! The book I've been working on for a long time has been published and is now available to buy. It's called Practical SVG. …
On your average CSS-writin' day, odds are you won't even think about precedence in CSS. It doesn't come up a whole heck of a lot. But it does matter! It comes up any time multiple CSS selectors match and element with the exact same specificity.
Assuming specificity is exactly the same, order does matter.
Styles declared later win. …
I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate …
Ahmad Shadeed with a bonafide CSS trick:
I noticed a CSS property called writing-mode, this was the first time that I know of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it with English, we can create a vertical text very easily.
Even in English, writing-mode: vertical-lr; help us lay out text vertically without a bunch of positioning, placeholding, and transforms.…
I recently saw this loader on CodePen, a pure CSS 3D rotating set of bars with a fading reflection. It's done by using an element for each bar, then duplicating each and every one of these elements to create the reflection and finally adding a gradient cover to create the fading effect. Which sounds a bit like scratching behind your right ear with the toes of your left foot! Not to mention the gradient cover method for the fading effect …
I'm still quite a newbie at this stuff, but I think the development tooling around React and Redux is pretty dang impressive. …
Wufoo is for building web forms. From a simple contact forms to complex, multi-page, logic-controlled mega forms.
Personally, I'm a huge Wufoo user. I have multiple accounts across different organizations. Each organization has multiple users with access to different forms and reports. I've used it for job applications, customer support, selling T-shirts, collecting feedback, lead generation, and more.
Wufoo has collected literally hundreds of thousands of form entries for me, saving me countless hours of dev work. Often those entries …
Jeremy Thomas explains web design (the basic applying style to content part) through an interactive step-by-step walkthrough. I could see this being an ah-ha moment for plenty of folks in the early stages of understanding web design.…
This is the third and final article in a series on "remote control WordPress". That's my nickname for this strategy of managing network settings on one "control" install, and then pulling those values into all your client installs. The advantage is that it saves staff members from having to toggle the same settings on the same network plugins, across many multisite installs.…
An interesting conversation came up in the comment thread of one of our posts last week, Considerations for Styling a Modal.…
This is pretty big news: earlier today the WebKit team announced that iOS 10 will now support silent <video> elements with the autoplay attribute, which is a big deal for performance. Jer Noble describes the update in much more detail:
It turns out that people these days really like GIFs. But the GIF format turns out to be a very expensive way to encode animated images when compared to a modern video codec like H.264. We’ve found that GIFs can …
I bookmarked a tweet a few months ago, as it was a bonafide CSS trick and that's what we love around here.
The issue is: how do we make a full-browser-width container when we're inside a limited-width parent?…
Leonie Watson:
You should use the <fieldset> and <legend> elements when:
You should not use the <fieldset> and <legend> when:
I got frustrated of not being able to tell the tabs apart as I was working on stuff. So this is my so-dumb-it's-smart solution.
The only hitch in my gittyup was that I had to add it to .gitignore, which untracked the file, which deletes it, and had to manually slip it back onto the server. Although it looks like there are smarter ways.…
I vividly remember my first encounter with a content management system: It was 2002 with a platform called PHP-Nuke. It offered a control panel where site administrators could publish new content that would be immediately available to readers, without the need to create/edit HTML files and upload them via FTP (which at the time was the only reality I knew).
Once I'd made the jump to a CMS, I didn't look back. CMSs quickly became part of my toolkit …
This is the second article in a three-part series about using the WP API to achieve something I'm calling "Remote Control WordPress", a lifestyle where you'd manage network settings on a "control" install, and have other "client" installs pull their settings from the control. The advantage of this is that you could then manage the settings for many WordPress installs all in one place. The first article laid out how to register network settings as a custom endpoint in the …
Say you want an animation to run for 1 second, but then delay for 4 seconds before running again. Seems like that would be easy. Turns out it's not-so-straightforward, but doable. You need to fake it.…
A modal. A small box that pops up to tell you something important. How hard can it be? Wellllll. Medium hard, I'd say. There's quite a few considerations and a few tricky things to get just right. Let us count the ways.…
The following is a guest post by Daniel Jauch. It's a quicky that covers something I bet many of us have run across at one time or another: border-collapse is great, until it impedes on your ability to change a border color you're trying to change because of the overlapping.
The border-collapse property is great for making borders even all around <table></table> cells. It makes for a clean look that I actually prefer.
But, there is something that can …
Squee!
The post we've been waiting for from Zach Leatherman. This will be the go-to reference when making tech and UX choices on font loading.
Zach compares 11 current (and future) techniques for loading web fonts, all with live demos. He clearly lists the PRO's and CON's for each without making it a novel. Most valuably, he provides a VERDICT on each, which let's you know if the technique is up-to-par or not.
A winner is declared, but it's fairly …
At my day job, we have about 1,000 sites spread across 30 WordPress multisite installs. The installs all run many of the same plugins and settings, especially at the network level. This causes a lot of wasted time for our staff: They have to manually repeat the same settings across 30 installs. Because of this, we're moving to something I like to call "Remote Control WordPress".…
It was way back in 2008 that Chris shared his "Ah-ha!" moment when working with CSS. You know, that metaphorical lightbulb that ignites when you go from not knowing what the heck CSS is to suddenly having a baseline for understanding how it works.…
We often want a component to respond to the dimensions of its parent element rather than the dimensions of the browser window. Currently that’s not possible but ultimately that’s the idea behind Element Queries, and over on Smashing Magazine Tommy Hodgins has written about the development of EQCSS.js, a JavaScript library which allows developers to write element queries.
This implementation of element queries is interesting as it suggests that we can style an element dependent on the features …
Working at any large company, the greatest hurdle is always the problem of scale. Be it engineering, design, or how they work together, communication is the key to a successful business. Here are some of the tools that I've seen help a great deal while collaborating on a large team. With a number of engineers and designers in the mix — not to mention hybrids like me — working together seamlessly and staying focused on a common goal for …
One idea that has lodged itself into my brain recently (largely from this panel discussion) is how a front end developer needs to be aware. In a general sense, the front end developer is positioned in the middle of lots of other jobs. Everybody involved in a web team ends up talking with the front end developers. That makes sense. The front end developers create the actual thing people interact with. Everything comes together with the front end …
YNAB: You’ve Never Budgeted Like This Before
YNAB is different because it works. By combining a proven method with award-winning software, on average users save $200 the first month, and $3,300 by month nine. YNAB will teach you to think about your money differently and give you the tools to put it into practice. What have you got to lose? (Except all that debt and stress, so, sort of a lot, actually.)
Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed in order to ensure a great user experience for everyone.…
There is a debate on whether HTML classes belong in your content. As in, classes that are strictly related to the presentation of that content. Sometimes the use of these classes is unavoidable. A callout paragraph, a pull quote, a carousel in the middle of a post... you'll need classes to style and add functionality to these things.
While you sometimes need them, the less you write them into the actual post content, in my opinion, the better.…
Another year! They tick by all-too-quickly these days. It's time for another commemorative post, as we do. A state of the union. A mile-marker style post where I talk about the year gone by and where things stand 'round here.…
These are the ways in which I make GIFs. Sometimes for blog posts. Sometimes for tweets. Sometimes for documentation. Sometimes for fun. GIFs can be tremendously useful and communicate better than a still image or even video in some circumstances.
I use a Mac so these are mostly Mac things.…
Money magazine recently named The Aspiration Summit Account as the "Best Checking Account in America".
The Summit Account is an online-only checking account with no fees, no minimum balance and no minimum monthly deposit requirements. You can earn up to 1.00% interest and get unlimited ATM fee reimbursements. Perfect for frequent travelers and smart savers!
Interestingly, Aspiration incorporates a "pay what is fair" model. You choose your price and pay a "tip", a monthly recurring payment up to $6 per …