跟随,学习,进步

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.

转到作者网站

Using rel=”preconnect” to establish network connections early and increase performance

Milica Mihajlija: Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them. The graphic in the post does a good job of making this an obviously good choice for performance: Robin did a good job of rounding up … Read article The post Using rel=”preconnect” to establish network connections early and increase performance appeared first on CSS-Tricks.


Bounce Element Around Viewport in CSS

Let's say you were gonna bounce an element all around a screen, sorta like an old school screensaver or Pong or something. You'd probably be tracking the X location of the element, increasing or decreasing it in a time loop and — when the element reached the maximum or minimum value — it would reverse direction. Then do that same thing with the Y location and you've got the effect we're after. Simple enough with some JavaScript and math. Here's … Read article The post Bounce Element Around Viewport in CSS appeared first on CSS-Tricks.


Can you view print stylesheets applied directly in the browser?

Yep. Let's take a look at how to do it in different browsers. Although note the date of this blog post. This stuff tends to change over time, so if anything here is wrong, let us know and we can update it. In Firefox... It's a little button in DevTools. So easy! Open DevTools (Command+Option+i) Go to the “Inspector” tab Click the little page icon In Chrome and Edge... It's a little weirder, I think, but it's still a fairly … Read article The post Can you view print stylesheets applied directly in the browser? appeared first on CSS-Tricks.


Draggin’ and Droppin’ in React

The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide you with more complex functionality (e.g. multiple drag and drop instances), and if they do, it becomes very complex. This is where react-sortable-hoc comes into play.… Read article The post Draggin’ and Droppin’ in React appeared first on CSS-Tricks.


Accessibility and web performance are not features, they’re the baseline

This week I’ve been brooding about web performance and accessibility. It all began when Ethan Marcotte made a lot of great notes about the accessibility issues that are common with AMP: In the recordings above, I’m trying to navigate through the AMP Story. And as I do, VoiceOver describes a page that’s impossible to understand: the arrows to go back or forward are simply announced as “button”; most images are missing text equivalents, which is why the screen reader … Read article The post Accessibility and web performance are not features, they’re the baseline appeared first on CSS-Tricks.


Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM

In this week's roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves visualizations to the Shadow DOM. Chrome ships the loading attribute The HTML loading attribute for lazy-loading images and iframes is now supported in Chrome. You can add loading="lazy" to defer the loading of images and iframes that are below the viewport until the user scrolls near them. Google suggests either treating this feature as a progressive enhancement … Read article The post Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM appeared first on CSS-Tricks.


The Making of an Animated Favicon

It’s the first thing your eyes look for when you’re switching tabs. That’s one way of explaining what a favicon is. The tab area is a much more precious screen real-estate than what most assume. If done right, besides being a label with icon, it can be the perfect billboard to represent what’s in or what’s happening on a web page. The CSS-Tricks Favicon Favicons are actually at their most useful when you’re not active on a tab. Here’s … Read article The post The Making of an Animated Favicon appeared first on CSS-Tricks.


Front Conference in Zürich

(This is a sponsored post.) I'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited about that, but of course, the web nerd in me is excited to be at the conference with lots of fellow webfolk. Some old friends, but mostly new people I've never met before but admire their work. Yessssss. I cracked open DevTools on their speaker page and re-arranged … Read article The post Front Conference in Zürich appeared first on CSS-Tricks.


Staggered CSS Transitions

Let's say you wanted to move an element on :hover for a fun visual effect. @media (hover: hover) { .list--item { transition: 0.1s; transform: translateY(10px); } .list--item:hover, .list--item:focus { transform: translateY(0); } } Cool cool. But what if you had several list items, and you wanted them all to move on hover, but each one offset with staggered timing? The trick lies within transition-delay and applying a slightly different delay to each item. Let's select each list item individually and … Read article The post Staggered CSS Transitions appeared first on CSS-Tricks.


Contextual Utility Classes for Color with Custom Properties

In CSS, we have the ability to access currentColor which is tremendously useful. Sadly, we do not have access to anything like currentBackgroundColor, and the color-mod() function is still a ways away. With that said, I am sure I am not alone when I say I'd like to style some links based on the context, and invert colors when the link is hovered or in focus. With CSS custom properties and a few, simple utility classes, we can … Read article The post Contextual Utility Classes for Color with Custom Properties appeared first on CSS-Tricks.


The Differing Perspectives on CSS-in-JS

Some people outright hate the idea of CSS-in-JS. Just that name is offensive. Hard no. Styling doesn't belong in JavaScript, it belongs in CSS, a thing that already exists and that browsers are optimized to use. Separation of concerns. Anything else is a laughable misstep, a sign of not learning from the mistakes of the past (like the <font> tag and such.) Some people outright love the idea of CSS-in-JS. The co-location of templates and functionality, à la most … Read article The post The Differing Perspectives on CSS-in-JS appeared first on CSS-Tricks.


All the New ES2019 Tips and Tricks

The ECMAScript standard has been updated yet again with the addition of new features in ES2019. Now officially available in node, Chrome, Firefox, and Safari you can also use Babel to compile these features to a different version of JavaScript if you need to support an older browser. Let’s look at what’s new! Object.fromEntries In ES2017, we were introduced to Object.entries. This was a function that translated an object into its array representation. Something like this: let students = … Read article The post All the New ES2019 Tips and Tricks appeared first on CSS-Tricks.


Site Monetization with Coil (and Removing Ads for Supporters)

I've tried a handful of websites based on "tip with micropayments" in the past. They come and go. That's fine. From a publisher perspective, it's low-commitment. I've never earned a ton, but it was typically enough to be worth it. Now Bruce has me trying Coil. It's compelling to me for a couple reasons: The goal is to make it based on an actual web standard(!) Coil is nicely designed. It's the service that readers actually subscribe to … Read article The post Site Monetization with Coil (and Removing Ads for Supporters) appeared first on CSS-Tricks.


In Search of a Stack That Monitors the Quality and Complexity of CSS

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have excellent linters like StyleLint and CSSLint, but they only help at preventing mistakes at a micro level. Using a wrong color notation, adding a vendor prefix when you’re already using Autoprefixer, writing a selector in an inconsistent way... that kind of thing. We’re constantly looking for ways to improve the … Read article The post In Search of a Stack That Monitors the Quality and Complexity of CSS appeared first on CSS-Tricks.


Moving Text on a Curved Path

There was a fun article in The New York Times the other day describing the fancy way Elizabeth Warren and her staff let people take a selfie with Warren. But... the pictures aren't actually selfies because they are taken by someone else. The article has his hilarious line of text that wiggles by on a curved line as you scroll down the page. Let's look at how they did it. Movie: The curved line is drawn in SVG as … Read article The post Moving Text on a Curved Path appeared first on CSS-Tricks.


Building a Full-Stack Serverless Application with Cloudflare Workers

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details of deployment and DevOps, it's refreshing to be given a mode of building web applications that simply abstracts scaling and infrastructure away from me. Serverless has made me better at actually shipping projects! That being said, if you're new to serverless, it may be unclear how to translate the things that … Read article The post Building a Full-Stack Serverless Application with Cloudflare Workers appeared first on CSS-Tricks.


Weekly Platform News: CSS font-style: oblique, webhin browser extension, CSS Modules V1

In this week's roundup, variable fonts get oblique, a new browser extension for linting, and the very first version of CSS Modules. Use font-style: oblique on variable fonts Some popular variable fonts have a 'wght' (weight) axis for displaying text at different font weights and a 'slnt' (slant) axis for displaying slanted text. This enables creating many font styles using a single variable font file (e.g., see the "Variable Web Typography" demo page). You can use font-style: oblique… Read article The post Weekly Platform News: CSS font-style: oblique, webhin browser extension, CSS Modules V1 appeared first on CSS-Tricks.


Design Principles for Developers: Processes and CSS Tips for Better Web Design

It is technically true that anyone can cook. But there’s a difference between actually knowing how to prepare a delicious meal and hoping for the best as you throw a few ingredients in a pot. Just like web development, you might know the ingredients—<span>, background-color, .heading-1—but not everyone knows how to turn those ingredients into a beautiful, easy-to-use website. Whenever you use HTML and CSS, you are designing—giving form and structure to content so it can … Read article The post Design Principles for Developers: Processes and CSS Tips for Better Web Design appeared first on CSS-Tricks.


Get the Best Domain Name for your New Website

(This is a sponsored post.) If you're on CSS-Tricks, we can probably bet that you're in the process of building a really cool website. You've spent your time creating content, applying appropriate UX design techniques, coding it to perfection, and now you're about ready to launch it to the world. A great website deserves a domain name that represents all that you've built. With Hover, you have the flexibility to choose a domain name that truly reflects that. We … Read article The post Get the Best Domain Name for your New Website appeared first on CSS-Tricks.


Using Immer for React State Management

We make use of state to keep track of application data. States change as users interact with an application. When this happens, we need to update the state that is displayed to the user, and we do this using React’s setState. Since states are not meant to be updated directly (because React’s state has to be immutable), things can get really complicated as states become more complex. They become difficult to understand and follow. This is where Immer comes … Read article The post Using Immer for React State Management appeared first on CSS-Tricks.