{"id":156,"date":"2023-12-03T19:19:43","date_gmt":"2023-12-04T00:19:43","guid":{"rendered":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/?p=156"},"modified":"2023-12-03T19:19:50","modified_gmt":"2023-12-04T00:19:50","slug":"css-is-everything","status":"publish","type":"post","link":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/css-is-everything\/","title":{"rendered":"CSS is Everything"},"content":{"rendered":"\n

If I could stop time while earning my web dev degree to focus on what I really, really want to, without a care in the world for coursework or work-work or pulling weeds or running errands, it\u2019d be CSS all day baby. The features are just so powerful<\/em> now that it feels like an insult to CSS to bust out Bootstrap anymore.<\/p>\n\n\n\n

New scroll-snap features<\/h2>\n\n\n\n

Scroll-snap has been around for a quick minute, but there are a few new features that make it even more exciting to work with! If you haven\u2019t used scroll-snap before, it allows you to lock the viewport or scroll container to specific elements or locations after the user stops scrolling. It\u2019s awesome for elegant scrolling UX that helps your content shine.<\/p>\n\n\n\n

The new scroll-snap-align<\/code> property lets you control how an element is aligned when it snaps into position. Think top, bottom, center, left, or right of the scroll container. A value of both<\/code> is now supported for scroll snap in both axes, too. You can also make it easier to snap using touch gestures with scroll-snap-touch-snap-points: true;<\/code><\/p>\n\n\n\n

Nesting<\/h2>\n\n\n\n

Y\u2019all. Hold on to your hats. Native CSS finally supports nesting with the &<\/code> or nest<\/code> syntax! No more long strings of repetitive selectors to style specific child elements. Now you can just nest them under a single selector.<\/p>\n\n\n\n

Instead of something like this:<\/p>\n\n\n\n

.section {\n  background-color: green;\n}\n\n.section p {\n  font-size: 1rem;\n}\n\n.section p span:hover {\n  color: red;\n}<\/code><\/pre>\n\n\n\n
You could style the same elements like this:<\/p>\n\n\n\n
.section {\n  background-color: green;\n  p {\n    font-size: 1rem;\n    span {\n      &:hover {\n        color: red;\n       }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
New pseudo-classes<\/h2>\n\n\n\n
There are quite a few new pseudo-classes available with varying browser support right now. These are a couple that I\u2019m personally excited about:<\/p>\n\n\n\n
:has()<\/code><\/h3>\n\n\n\n
Now supported in most browsers, :has()<\/code> is a relational pseudo-class that selects elements only if they contain another specified element. For example, p:has(img)<\/code> selects all <p><\/code> elements that contain an <img><\/code> child element.<\/p>\n\n\n\n
:current<\/code><\/h3>\n\n\n\n
The :current<\/code> pseudo-class is “time dimensional”, meaning it can match elements in relation to a timeline, or what is currently displayed on the screen, like WebVTT video subtitles. While still experimental, :past<\/code> and :future<\/code> are also in the works!<\/p>\n\n\n\n
Container queries<\/h2>\n\n\n\n
A helpful alternative to media queries, container queries let you style elements based on the size of their containers. It\u2019s brilliant for streamlining or expanding content! Say that a container element gets too tight for all of its child elements in a particular context. Instead of tying a style change to the device size, you can base it on the size of the container itself.<\/p>\n\n\n\n
First you have to declare a \u201ccontainment context\u201d on the container element to give the browser a heads up that you may want to query its size later. To do so, set the container-type<\/code> property to size<\/code>, inline-size<\/code>, or normal<\/code> (MDN reference for details on values<\/a>).<\/p>\n\n\n\n
Then you can use a container at-rule to specify styles for child elements when the container condition is true. Here’s the syntax:<\/p>\n\n\n\n
@container <container-condition> {\n  <styles>\n}<\/code><\/pre>\n\n\n\n
Accent-color<\/h2>\n\n\n\n
Every try to style afriggin checkbox, range field or radio button? If not, trust me when I say it\u2019s easier to substitute a custom widget that mimics these kinds of inputs than try to modify them with CSS. At least it used to be!<\/p>\n\n\n\n
The new accent-color property lets you target, well, the accent colors of these interface controls. Bye bye browser blue is as easy as input[type=checkbox] { accent-color: red; }<\/code><\/p>\n\n\n\n
In summary<\/h2>\n\n\n\n
These are just a few of the powerhouse new features to start showing green boxes on CanIUse<\/a>. Custom variables, scoped styles, relative colors, new text-wrap and shape values, and even conditional rules like @when<\/code> and @else<\/code> are coming around the bend, too!<\/p>\n","protected":false},"excerpt":{"rendered":"
If I could stop time while earning my web dev degree to focus on what I really, really want to, without a care in the world for coursework or work-work or pulling weeds or running errands, it\u2019d be CSS all day baby. The features are just so powerful now that it feels like an insult […]<\/p>\n","protected":false},"author":1,"featured_media":157,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[11,5,14],"class_list":["post-156","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-development","tag-frontend","tag-new-tech"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-content\/uploads\/2023\/12\/48146591372_aba17a5f3f_b.jpg","_links":{"self":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/posts\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":1,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/posts\/156\/revisions\/158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/media\/157"}],"wp:attachment":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}