跟随,学习,进步

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.

转到作者网站

How to Section Your HTML

The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section. Here is a brief explanation of each sectioning element and how they are used: <nav> - Equivalent to role="navigation". Major site navigation that consistently appears frequently across the site. Examples include the primary navigation, secondary navigation, and in-page navigation. <aside> - … Read article The post How to Section Your HTML appeared first on CSS-Tricks.


If you can build a site with WordPress.com, you should build your site on WordPress.com.

That’s what I like to tell people. I’ve seen too many websites die off, often damaging the company along the way because the technical debt of hosting and maintaining the website is too much in the long term. For a few examples, there is the domain name itself to handle and the tricky DNS settings to go along with it. There is choosing and setting up web hosting, which often requires more long-term maintenance than many folks would like. There … Read article The post If you can build a site with WordPress.com, you should build your site on WordPress.com. appeared first on CSS-Tricks.


Managing State in React using Unstated-Next

In a previous post, we saw how to manage state using Unstated. As you might recall, Unstated uses React’s built-in setState to allow you create components that can consume state by subscribing to a provider — like the React’s Context API. Well, we’re going to build off that last post by looking at Unstated Next, a library that author Jamie Kyle identifies as the “spiritual successor" to his Unstated project. Unstated Next provides both React Hooks… Read article The post Managing State in React using Unstated-Next appeared first on CSS-Tricks.


Components, yo.

I see VuePress just went 1.0. Explained simply, it's a static site generator based on Vue. But of course, you work in Vue, which means you work in components. All the modern JavaScript frameworks are component-based. Even when they disagree with each other about specific things (like how Svelte requires compilation), they all seem to agree on the model of working in components. React is all components. A popular static site generator for React is Next.js. … Read article The post Components, yo. appeared first on CSS-Tricks.


Weekly Platform News: CSS Scroll Snap, Opera GX, PWA Install Icon

In this week's roundup, Chrome is adding an install option for Progressive Web Apps, Opera GX comes to Windows, the ECMAScript proposals get an update, and CSS Scroll Snap is coming to a Firefox browser near you. The post Weekly Platform News: CSS Scroll Snap, Opera GX, PWA Install Icon appeared first on CSS-Tricks.


Drawing Realistic Clouds with SVG and CSS

Greek mythology tells the story of Zeus creating the cloud nymph, Nephele. Like other Greek myths, this tale gets pretty bizarre and X-rated. Here’s a very abridged, polite version. Nephele, we are told, was created by Zeus in the image of his own beautiful wife. A mortal meets Nephele, falls in love with her and, together, they take an adult nap™. Finally, in a strange twist, the cloud gives birth to half-human half-horse Centaur babies. Weird, right? Personally, I … Read article The post Drawing Realistic Clouds with SVG and CSS appeared first on CSS-Tricks.


A11Y with Lindsey

Lindsey Kopacz has a wonderful blog about accessibility. I've seen a number of her articles making the rounds lately and I was like, dang I better make sure I'm subscribed. For example: An Introduction to ARIA States 3 Simple Tips to Improve Keyboard Accessibility Create custom keyboard accessible checkboxes Regarding that last one, I remember learning from Sara Soueidan that a good tip for this to position them over the new custom checkboxes and hide them via opacity … Read article The post A11Y with Lindsey appeared first on CSS-Tricks.


Grid, content re-ordering and accessibility

Take this: <ol> <li>Get hungry</li> <li>Order pizza</li> <li>Eat pizza</li> </ol> That HTML ends up in the DOM that way (and thus how it is is exposed to assistive technology), and by default, those list items are also visually shown in that order. In most layout situations, the visual order will match that DOM order. Do nothing, and the list items will flow in the block direction of the document. Apply flexbox, and it will flow in the inline direction of … Read article The post Grid, content re-ordering and accessibility appeared first on CSS-Tricks.


Using Cypress to Write Tests for a React Application

End-to-end tests are written to assert the flow of an application from start to finish. Instead of handling the tests yourself — you know, manually clicking all over the application — you can write a test that runs as you build the application. That’s what we call continuous integration and it’s a beautiful thing. Write some code, save it, and let tooling do the dirty work of making sure it doesn’t break anything. Cypress is just one end-to-end testing … Read article The post Using Cypress to Write Tests for a React Application appeared first on CSS-Tricks.


Everything You Need to Know About Date in JavaScript

Date is weird in JavaScript. It gets on our nerves so much that we reach for libraries (like Date-fns and Moment) the moment (ha!) we need to work with date and time. But we don't always need to use libraries. Date can actually be quite simple if you know what to watch out for. In this article, I'll walk you through everything you need to know about the Date object. First, let's acknowledge the existence of timezones. Timezones There … Read article The post Everything You Need to Know About Date in JavaScript appeared first on CSS-Tricks.


Level up your .sort game

Sorting is a super handy JavaScript method that can display the values of an array in a certain order. Whether that’s real estate listings by price, burger joints by distance, or best nearby happy hours by rating, sorting arrays of information is a common need. If you’re already doing this with JavaScript on a project, you are will likely using the built-in array .sort method, which is in the same family of array methods that includes .filter, .map and … Read article The post Level up your .sort game appeared first on CSS-Tricks.


Designing with Motifs

I love the way Erik Kennedy talks about digital design. Very practical and understandable. Have a listen to a chat with him we had on ShopTalk. One of his latest blog posts is titled "The #1 Way to Spice Up Your Designs (And Create a More Cohesive Brand)" and it's about something he pegs as more of an intermediate (beyond the basics) level design tip about the idea of motifs. In music, that might be a bit of a … Read article The post Designing with Motifs appeared first on CSS-Tricks.


Using DevTools to Improve the UX Design to Development Process

I’d like to tell you how I see code and design intersect and support one another. Specifically, I want to cover how designers can use code in their everyday work. I suggest this not because it’s a required skill, but because even a baseline understanding of coding can make designs better and the hand-off from design to development smoother. As a UX Designer, I am always looking for good ways to both explore my UX design problems and communicate the … Read article The post Using DevTools to Improve the UX Design to Development Process appeared first on CSS-Tricks.


Weekly Platform News: Feature Policy, ECMAScript i18n API, Packaged PWAs

In this week's news, a new Feature Policy API in Chrome, Firefox blocks cookies from known trackers, Chrome for Android now allows websites to share images, and more. The post Weekly Platform News: Feature Policy, ECMAScript i18n API, Packaged PWAs appeared first on CSS-Tricks.


Your first performance budget with Lighthouse

Ire Aderinokun writes about a new way to set a performance budget (and stick to it) with Lighthouse, Google’s suite of tools that help developers see how performant and accessible their websites are: Until recently, I also hadn't setup an official performance budget and enforced it. This isn’t to say that I never did performance audits. I frequently use tools like PageSpeed Insights and take the feedback to make improvements. But what I had never done was set a … Read article The post Your first performance budget with Lighthouse appeared first on CSS-Tricks.


What if we got aspect-ratio sized images by doing almost nothing?

Say you have an image you're using in an <img> that is 800x600 pixels. Will it actually display as 800px wide on your site? It's very likely that it will not. We tend to put images into flexible container elements, and the image inside is set to width: 100%;. So perhaps that image ends up as 721px wide, or 381px wide, or whatever. What doesn't change is that images aspect ratio, lest you squish it awkwardly (ignoring the special … Read article The post What if we got aspect-ratio sized images by doing almost nothing? appeared first on CSS-Tricks.


How to Use the Web Share API

The Web Share API is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content — say a link or a contact card — directly from a website or web application. While it’s already possible for a user to share content from a webpage via native means, they have … Read article The post How to Use the Web Share API appeared first on CSS-Tricks.


Snag Resources from An Event Apart Boston 2019 and Save on Washington D.C. Registration

(This is a sponsored post.) Hey, so we talked a little bit about An Event Apart Boston 2019 leading up to the event and now there are a ton of resources available from it. I stopped counting the number of links after 50 because there's way more than that. Seriously, there's stuff in there on subgrid, working with CSS Regions, design systems, using prefers-reduced-motion... and much, much more, so check it out. And, while you're at it, you … Read article The post Snag Resources from An Event Apart Boston 2019 and Save on Washington D.C. Registration appeared first on CSS-Tricks.


A Course About CSS Layout and Animations

Christina Gorton just released a new course called CSS Layout and Animations as a part of Design+Code, which is a $9/month. That includes a ton of video training on everything from stuff like this to React to Sketch to iOS development... and beyond! Christina approaches the course with my favorite way to learn this stuff: by starting from a lovely design and then pulling it off with code. That's Figma as the design tool, which is another tool I… Read article The post A Course About CSS Layout and Animations appeared first on CSS-Tricks.


JAMstack? More like SHAMstack.

I'm a fan of the whole JAMstack thing. It seems like a healthy web movement. I'm looking forward to both of the upcoming conferences. Of any web trend, #jamstack seems like it will be the least regrettable. — Chris Coyier (@chriscoyier) May 22, 2019 I feel like the acronym might not be quite doing it justice though. Not that I suggest we change it. Once a thing like that has legs, I find it's best to roll with it. … Read article The post JAMstack? More like SHAMstack. appeared first on CSS-Tricks.