Skip to main content
Fresh Article

Multi-Line Truncation with Pure CSS

Truncating a single line of text if is fairly straightforward. Truncating multiple lines is a bit harder. Using just CSS (no JavaScript or server-side dancing) is nice for the simplicity. It's gotten a little easier lately since Firefox (since version 68) has started supporting the ultra-bizarre -webkit-line-clamp soup method, which makes browser support for that pretty OK.

There is another way though, which is very clever and something I'd call a bonafide CSS trick. We somehow failed to … Read article

Article

Improving Video Accessibility with WebVTT

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
- Tim Berners-Lee

Accessibility is an important element of web development, and with the ever-growing prevalence of video content, the necessity for captioned content is growing as well. WebVTT is a technology that solves helps with captioned content as a subtitle format that integrates easily with already-existing web APIs.

That’s what we’re going to look at here in this article. … Read article

Article

Micro Frontends

One random day not long ago, I started hearing joke after joke about "micro frontends" — sort of how I first learned about Toast. I didn't understand the source until asking around, which uncovered this article from Cam Jackson.

In this article we'll describe a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code.

I'd argue it shouldRead article

Article

A Peek at New Methods Coming to Promises

Promises are one of the most celebrated features introduced to JavaScript. Having a native asynchronous artifact baked right into the language has opened up a new era, changing not only how we write code but also setting up the base for other freat APIs — like fetch!

Let's step back a moment to recap the features we gained when they were initially released and what new bells and whistles we’re getting next.… Read article

Article

Finally… A Post on Finally in Promises

“When does finally fire in a JavaScript promise?” This is a question I was asked in a recent workshop and I thought I’d write up a little post to clear up any confusion.… Read article

Sponsored Link

So, you think you’ve got project management nailed down

Who needs a project manager? You're an organized person who can keep track of your own work, right?

Wrong.

Well, wrong if you're part of a team. The thing about being self-organized is that it's related to project management but not synonymous with it. Case in point: what happens if your project relies on someone else's involvement? Sure you're organized, but can you always say the same about your co-workers? Chances are you need something to keep everyone in sync … Read article

Article

Managing Multiple Backgrounds with Custom Properties

One cool thing about CSS custom properties is that they can be a part of a value. Let's say you're using multiple backgrounds to pull off a design. Each background will have its own color, image, repeat, position, etc. It can be verbose!… Read article

Article

Build a Chat App Using React Hooks in 100 Lines of Code

We’ve looked at React Hooks before, around here at CSS-Tricks. I have an article that introduces them as well that illustrates how to use them to create components through functions. Both articles are good high-level overviews about the way they work, but they open up a lot of possibilities, too.

So, that’s what we’re going to do in this article. We’re going to see how hooks make our development process easier and faster by building a chat application.… Read article

Article

Position Sticky and Table Headers

You can't position: sticky; a <thead></thead>. Nor a <tr></tr>. But you can sticky a <th></th>, which means you can make sticky headers inside a regular ol' <table></table>. This is tricky stuff, because if you didn't know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individiaul element in a row. … Read article

Article

Color Inputs: A Deep Dive into Cross-Browser Differences

In this article, we'll be taking a look at the structure inside <input type='color'/> elements, browser inconsistencies, why they look a certain way in a certain browser, and how to dig into it. Having a good understanding of this input allows us to evaluate whether a certain cross-browser look can be achieved and how to do so with a minimum amount of effort and code.… Read article

Article

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults Query

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties aren't computing hogs, variables defined at the top-level in JavaScript are global to other page scripts, and Babel env now supports the defaults query — plus all of last month's news compiled into a single package for you.… Read article

Keep browsing in the archives

Monthly Mixup

Article

Learning to Learn

Article

Design Considerations: Text on Images

Article

Revisiting prefers-reduced-motion, the reduced motion media query

Monthly Sponsor
Thanks, monday!
icon-link icon-logo-star icon-search icon-star