After reading our last Developer Tip of the Week you’ve started working on a project with an API and as you’re designing the front end of your project you’ve realised that you keep using the same few styling elements. While you can do a lot with just a few simple lines, CSS has become a very powerful styling language you can accomplish a lot with.
Here are a CSS features you should try out:
- accent-color: When creating a form with radio buttons, checkboxes, progress bars, and range widgets it was always notoriously difficult to style them. We now have a properly called accent color.
Here is a link to a codepen that demo this feature: https://codepen.io/rtdonin/pen/MWBRWoG
- letter-spacing and word-spacing: Changing the spacing between letters and words creates a different dynamic within a page. Using rem, em, en, ch, and px you can manipulate the space however you choose.
Here is a link to a codepen that demo this feature: https://codepen.io/rtdonin/pen/qBywdrx
- scroll-snap: As a viewer is scrolling through your beautifully designed page you want them to take pause at quote or at the image you want to highlight. You can stop the scroll with scroll-snap.
Here is a link to a codepen that demo this feature: https://codepen.io/rtdonin/pen/xxJNrvN
- ::first-letter: If you want the first letter of each block element to be different from the rest of your text, there is a pseudo element you can use! Used to be you would have to isolate the first letter on its own span tag. Not anymore!
Here is a link to a codepen that demo this feature: https://codepen.io/rtdonin/pen/WNKBOBZ
- aspect-ratio: You need to control the ratio of an image or set of divs objects on the screen. You could manually set that up with a max-width and max-height you would like your image to be or you could let CSS completely handle that for you with aspect-ratio.
Here is a link to a codepen that demo this feature: https://codepen.io/rtdonin/pen/poZmWzX
- @layer: CSS is short for Cascading Styling Sheets. When you first learn to use CSS you probably learned that there is an order of precedence for all styling. The styling cascades from one property to the next. From highest priority to lowest we have inline styling, internal styling, and external styling. Within internal styling there is hierarchy as well from highest to lowest priority we have: id selectors, class selectors with pseudo elements and attributes. But, did you know that there is also an at rule? @layer creates a separate hierarchy within the internal styling. When declaring layers you can choose which order you want them to be prioritized in. You can also import styling sheets as layers.
Here is a link to a codepen that demo this feature: https://codepen.io/rtdonin/pen/qByzNdo?editors=1100
- text-transform: You have a text you need to transform the capitalization of. Either you need it to be all CAPITALIZED, all lowercase, or maybe just the First Letter Of Each Word Needs To Be Capitalized. This property let’s you do just that.
Here is a link to a codepen that demo this feature: https://codepen.io/rtdonin/pen/MWBMjrP?editors=1100
- :has(): You have multiple elements that are very similar, but some have an extra element in them and need to be formatted a little bit differently. If it was the child element, a simple parent-element > child-element selector would would perfectly, but you need the parent element. How would you do it? We have a pseudo class for that, :has(), and with it we can target the parent element based on if it has a child element.
Here is a link to a codepen that demo this feature: https://codepen.io/rtdonin/pen/XWBLNpm
Share your projects with us if you eventually use any of these tips by tagging us on Twitter @trywilco!
