CSS Tricks

If you need an aspect-ratio sized <div> (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width. But media elements like <img> don't have children. The <video> tag isn't self-closing, but when it is supported (almost always), the content of it is replaced with a shadow DOM you don't control. Besides, these are the only two elements that "size to an external resource." So, how do you enforce aspect ratio on them when using a variable width like 100% or 75vw? Well, once they load, they will have their natural aspect ratio, so that's nice. But it also means they don't know the height while they are loading and it may cause performance jank...

Here’s how and why the team at GitHub has slowly been deprecating jQuery from their codebase: We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library. In this post, we will explain a bit of history of how we started depending on jQuery in the first place, how we realized when it was no longer needed, and point out that—instead of replacing it with another library or framework—we were able to achieve everything that we needed using standard browser APIs. The team explores how using tools like eslint-plugin-jquery discourages developers at GitHub from using jQuery, but the team a...

We've all seen articles like "The Top 5 Ways To Fix Your Sign Up Flow and Get On With Your Life." Articles like this aren't wrong or bad, they are just shallow and a bit junk food-y and BuzzFeed-y. Of course, a designer's actual job is complicated, nuanced, and difficult. But deep dives into all that are far less common. Khoi Vinh has been writing about this and points to some heavy self-reflection from Fabricio Teixeira and Caio Braga, publishers of the very popular UX Collective. It’s clear that the currency of design discourse is really concerned with the “how” of design, not the “why” of it. As Teixeira and Braga write: While designers tend to be skeptical of magic formulas—we’re decidedly suspicious of self-help gurus, magic diets, or miraculous career advice—we have a surprisingly ...

They are both URL paths. They have different names, though. <!-- root-relative --> <a href="./dogs.html">Dogs</a> <!-- absolute --> <a href="/dogs.html">Dogs</a> There are also fully-qualified URLs that would be like: <!-- fully qualified --> <a href="https://website.com/dogs.html">Dogs</a> Fully-qualified URL's are pretty obvious in what they do — that link takes you to that exact place. So, let's look those first two examples again. Say you have a directory structure like this on your site: public/ ├── index.html └── animals/ ├── cats.html └── dogs.html If you put a link on cats.html that links to /dogs.html (an "absolute" path), it's going to 404 — there is no dogs.html at the base/root level of this site! The / at the beg...

(This is a sponsored post.)This team management tool is exceptionally suitable for any industry sector and by any sized team. monday.com will perfectly serve a team of two or a team of hundreds spread around the globe, and it can manage multiple projects at once. monday.com promotes effortless collaboration and transparency, it's "cheetah fast," it displays status in as many as 20 different colors, and its status board can be customized to fit your needs and your workflow. It serves as an excellent alternative to having to force fit your work to meet the demands of your project management tools or systems. Start Free Trial Direct Link to Article — PermalinkThe post Visual. Intuitive. Unlike Anything Else. appeared first on CSS-Tricks. Source: CSS-tricks.com

I kicked off a really poppin' Twitter thread the other day: What are the LOWEST hanging fruit of web performance? Nothing fancy, anyone can do, big impact. Gzip. Optimize stuff. Reduce requests... What are other big ones? — Chris Coyier (@chriscoyier) August 17, 2018 So, I decided to round up all the ideas (both my own and yours) around that in a post over on the Media Temple blog. These are the things we dive into in that post: Reduce Requests Optimize Assets Make sure you’re gzipping Make sure you’re browser caching Use a CDN Lazy Load and Defer Loading of Things Use responsive images (or at least use reasonable sizes) Mind Your Fonts Good Hosting / HTTP2 / PHP7 Turbolinks Direct Link to Article — PermalinkThe post The Low Hanging Fruit of Web Performance appeared first on CSS-Tricks...

This is a wonderfully nerdy deep dive into a very specific CSS change by Manuel Rego Casasnovas. Here's a bit of terminology we should know: First question is, what is an indefinite size? The simple answer is that a definite size is a size that you can calculate without taking into account the contents of the element. An indefinite size is the opposite, in order to compute it you need to check the contents first. And then goes on to explain how complicated this all gets. The change, in a nutshell: Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. Manuel provides a nice visual demo: See the Pen [css-grid] Percentage row tracks by Manuel Rego Casasnovas (@mrego) on Co...

Here’s a nifty post by Chen Hui Jing where she walks us through her process for making radio buttons accessible via keyboard. I particularly enjoyed this bit where she discusses the four options that are available to us to hide the radio input and replace them with a selection of cards that act like toggles instead: Most of us mess up the keyboard navigation portion of things when we hide the input element. There are several ways to make something invisible or hidden: clip-path: polygon(0 0) display: none opacity: 0 visibility: hidden For custom radios (or checkboxes), option 2 and 4 are not recommended because screen readers won’t be able to read the default radio element. This also prevents us from using the :focus pseudo-element on the hidden input, so those are out of the picture. Whi...