Why You Need Advanced Elements

Advanced CSS Elements are detriment to your success as a developer. They can help you completely stand out from the crowd as a Web Developer!

These expert level elements required pretty little effort but each 1% improvement you make to your skills will compound over time!

Advanced CSS elements are usually pretty new, not supported in every browser and these new features will promote you as a developer!

---

The Expert Level Elements

So here is our list of 10 advanced CSS elements!

1. @ property Element (without space between @)

@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

The @ property element is an advanced CSS element used to replace variables in the root! It includes 3 descriptors:

• Syntax, the allowable property to be used (like color)
• Inherits, if the property is inherited by children
• Initial-value, initial value for the property

@ property is a part of the Houdini API (experimental features)! Check out the MDN for @ property here.

2. Painting API

.paint {
  background-image: paint(myPaintedImage);
}

This is an extremely advanced feature! It basically let's you draw in a function, import the function globally using JavaScript, then using it in your CSS element!

The process for creating a painted element is:

1. Create custom values using the paint() function
2. In a script tag import the JavaScript paint() function
3. Define the paint function in your CSS

If you visually want to see this process, check it out here.

3. @ supports Element

@supports (property: value) {
  CSS rules to apply
}

@ support is basically a conditional statement for elements! You can imagine it as a media query but with elements.

Basically if element defined exists, do something! Here is an example:

.box {
    border: 4px solid blue;
    color: blue;
}
@supports (row-gap: 10px) {
    .box {
        border: 4px solid red;
        color: red;
    }
}

You can also test for more than one feature by adding "and" to it:

@supports (property1: value) and (property2: value) {
  CSS rules to apply
}

You can test for the opposite with:

@supports not (property: value) {
  CSS rules to apply
}

And finally you can test for if one or the other exists using "or":

@supports (property1: value) or (property2: value) {
  CSS rules to apply
}

4. @ container Element

@container (max-width: 850px) {
  .links {
    display: none;
  }
}

@ container is a really cool element that is experimental in Chrome Canary! Basically, when the element inside the @ container's parent hits the value (850px) it will do whatever the child's elements are.

It is kind of like Media Query but works with elements instead of the viewport!

It is a bit complicated but, described really nicely here.

5. Media Screen for Accessibility

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

Media screen for accessibility is a really cool feature in CSS. Say a user has set their reduced motion to reduce, media can pick that up and do something if the user has those settings!

There are tons of elements this can work with like contrast, motions, etc.

If you want some more information on it, check it out here.

6. @ charset

@charset "utf-8";

@ charset is pretty much a useless rule I decided to add here. It simply defines what type of encoding you want to add to your stylesheet!

If you're interested in this, check it out here.

7. @ counter-style Element

@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}

The @ counter-style element is something I just learned! It is an advanced element to specify strings not know by the stylesheet!

There is an abundance of descriptors I will not list (it is crazy) but you can check it out in the link below!

If you want a custom list-style or text-decoration you can use this element to specify the character then call it with the name of the counter-style!

If you want to try this out or learn more, go here.

8. @ layer

@layer layer-name {rules};
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules};

@ layer is a newer element used to describe a cascade layer! Layers are basically separated elements from the normal stylesheet so they can override layers.

This gives much more control to the Web Developer in developer their sites!

It is very complicated, so if you want to try it check it out here.

9. @ scroll-timeline

@scroll-timeline moveTimeline {
  source: auto;
  orientation: vertical;
  scroll-offsets: 0px, 500px;
}

This is a super cool element I just learned about! Scroll timelines are used in conjunctions with animations to provide extremely advanced effects!

It is kind of like activating animations slowly while you scroll or do another task!

Right now it is an experimental feature not available in any browser but definitely one I will be using soon!!!

For more info on this, check it out here.

---

Conclusion

This was one of my favorite article because I had no clue what I was missing in CSS. These features on mind-boggling I have never ever seen in other article!

I really hoped you enjoyed it. It would make my day if you gave me a like, follow or share and I also have a newsletter anyone can join!