Select Page

Category: CSS

Which CSS IS AWESOME makes the most sense if you don’t know CSS well?

Peter-Paul posted this question: Which of the examples in the image do you consider correct? If you know CSS well, don’t reply, just retweet. If you don’t know CSS too well, please reply to the poll in the next tweet. pic.twitter.com/4bgnf9Wdkc — ppk 🇪🇺 (@ppk) June 17, 2019 Note the interesting caveat: only vote in the poll if you don’t know CSS well. The winning answer was D! You gotta wonder if the result would have been different if the request for non-CSS experts wasn’t there. I like to think I know CSS OK, so I didn’t vote. My brain goes like this: I think he’s asking “by default,” so the answer may assume there’s no other CSS doing anything to that text. I wish I knew why the box was that particular width, but I guess I’ll just assume it’s a set width. It’s not B because ellipsis stuff requires extra stuff, and doesn’t work on multiple lines like that — unless we’re talking line clamping, which is even weirder. It’s not C because that requires hiding overflow which is never really a default — that is, except off the top and left of the browser window, I guess. Or in an iframe. It’s not D because words just don’t break like that unless you do pretty specific stuff. A actually makes decent sense. It’s weird to look...

Read More

Slice and Dice a Disc with CSS

I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of doing it with CSS be. Sliced gradient disc. The first thought was that this should be doable with border-radius, right? Well, no! The thing with border-radius is that it creates an elliptical corner whose ends are tangent to the edges it joins. My second thought was to use a circle() clipping path. Well, turns out this solution works like...

Read More

What’s New In CSS?

Rachel hooks us up with what the CSS Working Group is talking about: Styling scrollbars. This would come with properties like scrollbar-width and scrollbar-color. The best we have right now is proprietary WebKit stuff. Aspect ratios. I imagine the CSS portion of this journey will be best handled if it plays nicely with the HTML intrinsicsize stuff. Matching without specificity. :where() is :matches() with no specificity, and :matches() may become :is(). Logical Properties shorthand. The team is discussing a shorthand syntax for Logical Properties and the possibility logical would be default over the current physical with a defined “mode” in the stylesheet. Direct Link to Article — Permalink The post What’s New In CSS? appeared first on CSS-Tricks....

Read More

Using feature detection to write CSS with cross-browser support

In early 2017, I presented a couple of workshops on the topic of CSS feature detection, titled CSS Feature Detection in 2017. A friend of mine, Justin Slack from New Media Labs, recently sent me a link to the phenomenal Feature Query Manager extension (available for both Chrome and Firefox), by Nigerian developer Ire Aderinokun. This seemed to be a perfect addition to my workshop material on the subject. However, upon returning to the material, I realized how much my work on the subject has aged in the last 18 months. The CSS landscape has undergone some tectonic shifts:...

Read More

A Sliding Nightmare: Understanding the Range Input

You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it’s not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the screen. Understanding this is important because it helps us have a clear idea about whether we can make our slider look and behave consistently across browsers and which styles are necessary to do so. Looking inside a range input Before anything else, we need to make sure the browser...

Read More

Naming Things In CSS Grid Layout

When first learning how to use Grid Layout, you might begin by addressing positions on the grid by their line number. This requires that you keep track of where various lines are on the grid. Built on top of this system of lines, however, are methods that enable the naming of lines and even grid areas. Using these methods enables easier placement of items by name rather than number, but also brings additional possibilities when creating systems for layout....

Read More
www.000webhost.com