跟随,学习,进步

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.

转到作者网站

Motion Paths – Past, Present and Future

Cassie Evans has a great intro to motion paths. That is, being able to animate an element along a path. Not just up/down/left/right, but whatever curvy/wiggly/weird path you want. It's an interesting subject because there are so many different technologies helping to do it over time. SMIL, JavaScript-powered animation libraries, native JavaScript APIs, and even CSS via offset-path and friends. I think offset-path is funny - it was changed to that name from motion-path as you don't technically have… Read article The post Motion Paths – Past, Present and Future appeared first on CSS-Tricks.


Case Study: lynnandtonic.com 2019 refresh

Lynn Fisher walks us step-by-step through the redesign process of her latest outstanding personal website. In this design, increasing the width of the browser window will cause the illustrations on the page crack to open and reveal more within them: This case study reminded me that Lynn also has an archive of every case study and project that she’s made over the years and that it's most certainly worth checking out. Direct Link to Article — Permalink… Read article The post Case Study: lynnandtonic.com 2019 refresh appeared first on CSS-Tricks.


Techniques for Rendering Text with WebGL

As is the rule in WebGL, anything that seems like it should be simple is actually quite complicated. Drawing lines, debugging shaders, text rendering… they are all damn hard to do well in WebGL. Isn’t that weird? WebGL doesn't have a built-in function for rendering text. Although text seems like the most basic of functionalities. When it comes down to actually rendering it, things get complicated. How do you account for the immense amount of glyphs for every … Read article The post Techniques for Rendering Text with WebGL appeared first on CSS-Tricks.


CSS Architecture for Modern JavaScript Applications

There is a lot to like from Mike Riethmuller here: The title. When you're building a website from JavaScript-powered components anyway, that is a moment to talk about how to do styling, because it opens some doors to JavaScript-powered styles that you probably wouldn't otherwise choose. The personal experience and pragmatism. Drawing on five years of consulting, he's seeing that component re-use and style understandability is suffering, not improving, partly due to every team having different approaches. He says "it's … Read article The post CSS Architecture for Modern JavaScript Applications appeared first on CSS-Tricks.


Weekly Platform News: Upgrading Navigations to HTTPS, Sale of .org Domains, New Browser Engine

In this week's roundup: DuckDuckGo gets smarter encryption, a fight over the sale of dot org domains, and a new browser engine is in the works. Let's get into the news! DuckDuckGo upgrades and open-sources its encryption DuckDuckGo has open-sourced its “Smarter Encryption” technology that enables upgrading from HTTP to HTTPS, and Pinterest (a popular social network) is already using it for outbound traffic — when people navigate from Pinterest to other websites — with great results: Their outbound … Read article


Auto Layout lands in Figma

Here’s a fresh update to my favorite design tool that is thoroughly exciting: Auto layout! That means we can make frames that resize based on the size of the content within it. That's particularly useful for buttons in a design system where you want to drop a button on the page and then keep its left and right padding equal. However! The other exciting part of this update is that content can now be nudged down based on the … Read article


The Rising Complexity of JAMstack Sites and How to Manage Them

When you add anything with user-generated content or dynamic data to a static site, the complexity of the build process can become comparable to launching a monolithic CMS. How can we add rich content to static sites without stitching together multiple third-party services? For people in the development community static site generators are a popular choice over traditional content management systems (CMS) like WordPress. By comparison static sites are usually lightweight, highly configurable, fast, easy to use and can be … Read article


Firefox 71: First Out of the Gate With Subgrid

A great release from Firefox this week! See the whole roundup post from Chris Mills. I'm personally stoked to see clip-path: path(); go live, which we've been tracking as it's so clearly useful. We also get column-span: all; which is nice in case you're one of the few taking advantages of CSS columns. But there are two other things I think are a very big deal: If you have fluid images (most sites do) via flexible-width containers … Read article


Filtering Lists Dynamically With Vue on the Server Side is Easier Than You’d Think

I recently attended the ARTIFACT conference in Austin, TX, and was inspired by a few talks about accessibility through the lens of site performance. It became clear to me that there is this tendency to rely on big JavaScript frameworks to handle the work — like React, Vue, and Angular — but that can be overkill in some cases. That is, negatively affecting site performance, and thus accessibility. At the same time, these frameworks can make development easier and more … Read article


WhoCanUse

There are loads of microsites and developer tools for looking at color accessibility, including tools built right into browser DevTools. They often show you if a color passes AA or AAA WCAG guidelines. But color contrast is more complicated than that because there is a wide variety of vision impairments. This site from Corey Ginnivan takes two colors and then shows you a simulation of different vision types (e.g. Tritanomaly, trouble distinguishing blues) and whether the colors still pass OK. … Read article


The New Klim Type Website is Impossibly Lovely

I’ve spent the last hour hunched over the new Klim Type foundry website with my arms outstretched as if it was a fire in a very dark cave. Klim Type makes and sells wondrous fonts — like Tiempos, and National 2 or Pitch — and this fresh redesign now showcases them in all their glory. Here’s an example of the type specimen from the Calibre typeface: There’s a shocking amount of beautiful design in this little website and I … Read article


Dark Mode Favicons

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports dark mode! <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: yellow; stroke: black; stroke-width: 3px; } @media (prefers-color-scheme: dark) { circle { fill: black; stroke: yellow; } } </style> <circle cx="50" cy="50" r="47"/> … Read article The post Dark Mode Favicons appeared first on CSS-Tricks.


State of JavaScript 2019 Survey

Well, hey, look at that — it's time for this year's State of JavaScript survey! You have taken this survey last year. Or in 2017. Or in 2016. It's been going on for a little while now and it always lends interesting insights into things like the features developers are using, the popularity of specific frameworks, and general trends. And, since the survey is going into its fourth year, we may start to get some real insights … Read article The post State of JavaScript 2019 Survey appeared first on CSS-Tricks.


Save Big on An Event Apart for a Limited Time!

(This is a sponsored post.) If you could get one gift from your boss this holiday season, what would you want it to be? You know, other than the usual mouse pad, picture frame or, my favorite, the ol' coffee mug and Starbucks card combo. What if you were to receive something, hmm, more substantial? Like something that keeps giving three days instead of one. Or something that levels up your front-end chops. Or something that lets you network … Read article The post Save Big on An Event Apart for a Limited Time! appeared first on CSS-Tricks.


Masking GIFs with other GIFs

The other day, Cassie Evans tweeted a really neat trick that I’ve never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful GIF and place it on top of a monochrome one:  See the Pen Masking gifs with other gifs... (svg masking is cool) by Cassie Evans (@cassie-codes) on CodePen. Considering I’ve never done anything with SVG masks before, I … Read article The post Masking GIFs with other GIFs appeared first on CSS-Tricks.


Having a Little Fun With Custom Focus Styles

Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even be looking to remove it yourself. So you do a little research and find out that this is strongly discouraged, because the focus outline is there for a reason: it provides visual feedback for keyboard navigation (using the Tab … Read article The post Having a Little Fun With Custom Focus Styles appeared first on CSS-Tricks.


“Headless Mode”

A couple of months ago, we invited Marc Anton Dahmen to show off his database-less content management system (CMS) Automad. His post is an interesting inside look at templating engines, including how they work, how CMSs use them, and how they impact the way we write things, such as loops. Well, Automad just released version 1.3.0 and it introduces a "headless" mode that brings it more in line with where the CMS landscape seems to be headed (pun … Read article The post “Headless Mode” appeared first on CSS-Tricks.


Simplified Fluid Typography

Fluid typography is the idea that font-size (and perhaps other attributes of type, like line-height) change depending on the screen size (or perhaps container queries if we had them). The core trickery comes from viewport units. You can literally set type in viewport units (e.g. font-size: 4vw), but the fluctuations in size are so extreme that's usually undesirable. Let's look at a technique for tamping the extremes, but it basically a one-liner now that CSS is evolving! The post Simplified Fluid Typography appeared first on CSS-Tricks.


Testing React Hooks With Enzyme and React Testing Library

As you begin to make use of React hooks in your applications, you’ll want to be certain the code you write is nothing short of solid. There’s nothing like shipping buggy code. One way to be certain your code is bug-free is to write tests. And testing React hooks is not much different from how React applications are tested in general. In this tutorial, we will look at how to do that by making use of a to-do application built … Read article The post Testing React Hooks With Enzyme and React Testing Library appeared first on CSS-Tricks.


Web Scraping Made Simple With Zenscrape

Web scraping has always been taken care of by actual developers, since a lot of coding, proxy management and CAPTCHA-solving is involved. However, the scraped data is very often needed by people that are non-coders: Marketers, Analysts, Business Developers etc. Zenscrape is an easy-to-use web scraping tool that allows people to scrape websites without having to code. Let’s run through a quick example together: Select the data you need The setup wizard guides you through the process of setting up … Read article The post Web Scraping Made Simple With Zenscrape appeared first on CSS-Tricks.