跟随,学习,进步

CSS-Tricks

CSS-Tricks

https://css-tricks.com

Tips, Tricks, and Techniques on using Cascading Style Sheets. CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people.

转到作者网站

Two Images and an API: Everything We Need for Recoloring Products

I recently found a solution to dynamically update the color of any product image. So with just one <img> of a product, we can colorize it in different ways to show different color options. We don’t even need any fancy SVG or CSS to get it done! We’ll be using an image editor (e.g. Photoshop or Sketch) and the image transformation service imgix. (This isn’t a sponsored post and there is no affiliation here — it’s just a technique … Read article The post Two Images and an API: Everything We Need for Recoloring Products appeared first on CSS-Tricks.


The Teletype Text Element Lives On… at Least on This Site

It was this: <tt> I say "was" because it's deprecated. It may still "work" (like everybody's favorite <marquee> in some browsers), but it could stop working anytime, they say. The whole purpose of it was to display text in a monospace font, like the way Teletype machines used to. Dave used it jokingly the other day. Per recent events: As you can see by this official transcript, Dave Rupert LLC has done nothing wrong... <tt>Client: This is the … Read article The post The Teletype Text Element Lives On… at Least on This Site appeared first on CSS-Tricks.


Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest Connections

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds are still trying to catch up to others... literally. Measure the impact of third-party code during page load Lighthouse, Chrome’s built-in auditing tool, now shows a warning when the impact of third-party code on page load performance is too high. The pre-existing “Third-party usage” diagnostic audit will now fail if the total main-thread blocking time caused by … Read article The post Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest Connections appeared first on CSS-Tricks.


Recipes for Performance Testing Single Page Applications in WebPageTest

WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at Theodo, I use it every single day. I am constantly amazed at what it offers to the web development community at large and the web performance folks particularly — for free. But things can get difficult pretty quickly when dealing with Single Page Applications — usually written with React, Vue, Svelte or any other … Read article The post Recipes for Performance Testing Single Page Applications in WebPageTest appeared first on CSS-Tricks.


Images Are Not Static Content

We constantly hear about the importance of keeping websites lean and fast. A fast-loading website makes users more satisfied, and satisfied users spend more time and money on your website. However, website optimization is a complex task, as there is not one silver bullet to fix all of the issues causing poor performance. We also hear that addressing the performance of images is a low hanging fruit if you want to improve your site’s user experience However, anyone who has … Read article The post Images Are Not Static Content appeared first on CSS-Tricks.


Blocking Third-Party Hands from the Cookie Jar

Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com, I'll get a cookie from css-tricks.com that handles my authentication. But css-tricks.com might also load an image from some other site. A common tactic in online advertising is to render a "tracking pixel" image (well named, right?) that is used to track advertising impressions. That request to another site for the image (say, ad.doubleclick.com) … Read article The post Blocking Third-Party Hands from the Cookie Jar appeared first on CSS-Tricks.


Patterns for Practical CSS Custom Properties Use

I've been playing around with CSS Custom Properties to discover their power since browser support is finally at a place where we can use them in our production code. I’ve been using them in a number different ways and I’d love for you to get as excited about them as I am. They are so useful and powerful! I find that CSS variables usage tends to fall into categories. Of course, you’re free to use CSS variables however you like, … Read article The post Patterns for Practical CSS Custom Properties Use appeared first on CSS-Tricks.


Let’s Not Forget About Container Queries

Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn't write as many global media queries based on page size. That's because we're actually trying to control a more scoped container, and the only reason we use media queries for that now is because it's the best tool we have in CSS. I absolutely believe that. There is another sentiment that goes around … Read article The post Let’s Not Forget About Container Queries appeared first on CSS-Tricks.


A Snippet to See all SVGs in a Sprite

I think of an SVG sprite as this: <svg display="none"> <symbol id="icon-one"> ... <symbol> <symbol id="icon-two"> ... <symbol> <symbol id="icon-three"> ... <symbol> </svg> I was long a fan of that approach for icon systems (<use>-ing them as needed), but I favor including the SVGs directly as needed these days. Still, sprites are fine, and fairly popular. What if you have a sprite, and you wanna see what's in it? Here's a tiny bit of JavaScript that will loop … Read article The post A Snippet to See all SVGs in a Sprite appeared first on CSS-Tricks.


Clipping, Clipping, and More Clipping!

There are so many things you can do with clipping paths. I've been exploring them for quite some time and have come up with different techniques and use cases for them — and I want to share my findings with you! I hope this will spark new ideas for fun things you can do with the CSS clip-path property. Hopefully, you'll either put them to use on your projects or play around and have fun with them. Before we dive … Read article The post Clipping, Clipping, and More Clipping! appeared first on CSS-Tricks.


Wufoo Cracks the Code for Forms So You Don’t Have To

There was a lot of buzz about forms last week when Jason Grisby pointed to a missing pattern attribute on Chipotle's order form that could have been used to help-through millions of dollars in orders. Adrian Roselli followed that up with the common mistake of forgetting for and id attributes on form inputs and the potential cost of it. Forms are hard. And that's without thinking about more complex features, like building conditional logic into questions, getting into validation, triggering … Read article The post Wufoo Cracks the Code for Forms So You Don’t Have To appeared first on CSS-Tricks.


Some Hands-On with the HTML Dialog Element

This is me looking at the HTML <dialog> element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and compelling features. I can't decide for you if you should use it in production on your sites, but I'd think it's starting to be possible. It's not just a semantic element, it has APIs and special CSS. We'll get to that stuff in a moment, … Read article The post Some Hands-On with the HTML Dialog Element appeared first on CSS-Tricks.


Introducing Sass Modules

Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features. While the current @import rule allows you to pull in third-party packages, and split your Sass into manageable "partials," it has a few limitations: @import is also a CSS feature, and the differences can be confusing If you @import the same file multiple times, it can slow down compilation, … Read article The post Introducing Sass Modules appeared first on CSS-Tricks.


Breakout Buttons

Andy covers a technique where a semantic <button> is used within a card component, but really, the whole card is clickable. The trick is to put a pseudo-element that goes beyond the button, covering the entire card. The tradeoff is that the pseudo-element sits on top of the text, so text selection is hampered a bit. I believe this is better than making the whole dang area a <button> because that would sacrifice semantics and likely cause extreme weirdness for … Read article The post Breakout Buttons appeared first on CSS-Tricks.


Using GitHub Template Repos to Jump-Start Static Site Projects

If you’re getting started with static site generators, did you know you can use GitHub template repositories to quickly start new projects and reduce your setup time? Most static site generators make installation easy, but each project still requires configuration after installation. When you build a lot of similar projects, you may duplicate effort during the setup phase. GitHub template repositories may save you a lot of time if you find yourself: creating the same folder structures from previous … Read article The post Using GitHub Template Repos to Jump-Start Static Site Projects appeared first on CSS-Tricks.


Why Progressive Web Apps Are The Future of Mobile Web

Here’s one of the best essays I’ve ever read about why progressive web apps are important, how they work, and what impact they have on a business: PWAs are powerful, effective, fast and app-like. It’s hard to imagine a mobile web property that could not be significantly improved via PWA implementation. They can also potentially eliminate the need for many “vanity” native apps that exist today. My only small disagreement with this piece is their use of the term “mobile … Read article The post Why Progressive Web Apps Are The Future of Mobile Web appeared first on CSS-Tricks.


Weekly Platform News: Tracking via Web Storage, First Input Delay, Navigating by Headings

In this week's roundup, Safari takes on cross-site tracking, the delay between load and user interaction is greater on mobile, and a new survey says headings are a popular way for screen readers to navigate a webpage. Let's get into the news. Safari’s tracking prevention limits web storage Some social networks and other websites that engage in cross-site tracking add a query string or fragment to external links for tracking purposes. (Apple calls this "abuse of link decoration.") When people … Read article The post Weekly Platform News: Tracking via Web Storage, First Input Delay, Navigating by Headings appeared first on CSS-Tricks.


Awards That Look Beyond the Flashy

Dan Mall is judging the Communication Arts Interactive 2020 awards. These types of things are usually a celebration of flashy, short-lived, one-off designs. Those things are awesome, but Dan has more in mind: I’d love to award work that demonstrates creative use of the highest level of color contrast ratios and works well on assistive devices. I’d love to award work that’s still useful when JavaScript fails. I’d love to award work that shows smart thinking and strategy in addition … Read article The post Awards That Look Beyond the Flashy appeared first on CSS-Tricks.


Adaptive Photo Layout with Flexbox

Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere. The solution is not only lightweight but also quite simple. We’ll be using an unordered list of images and just 17 lines of CSS, with the heavy lifters being flexbox and object-fit. Why? I have two hobbies: documenting my life with … Read article The post Adaptive Photo Layout with Flexbox appeared first on CSS-Tricks.


Automated (and Guided!) Accessibility Audits with axe Pro

It's important to know there are tools for automated accessibility testing of websites. They are a vital part in helping make sure your website is usable for everyone, which is both a noble goal and damn good for business. Automated tests won't catch every potential accessibility issue, but they help a great deal, and in my experience, help establish a culture of caring about accessibility. The more seriously you take these tests and actually fix the problems, the more likely … Read article The post Automated (and Guided!) Accessibility Audits with axe Pro appeared first on CSS-Tricks.