The CSS 3 standard contains lots of powerful features but sadly not everything is implemented across all browsers. Today I want to share 5 different CSS features that you can start using today as they are available in all major browsers. For the purpose of this article let’s assume that the major browsers are Chrome, Firefox, Internet Explorer 11, Safari and Microsoft Edge.

border-radius

Some of you may still remember the days where buttons with rounded corners were only possible using images. Luckily with the CSS style border-radius, you can get rounded corners really simple.

#exampleID {
  border-radius: 10px;
}
 
#exampleID2 {
 

box-sizing

With the CSS property box-sizing, you can specify how the width and height of any element should be calculated by the browser. You can use 2 different values for this:

• content-box is the default value and says that for the width and height calculation of any element the border, padding, and margin are not included
• border-box says that the padding and border (but not the margin) are included in the width and height calculation

#exampleID {
  box-sizing: content-box;
}
 
#exampleID2 {
  box-sizing: border-box;
}

:valid, :invalid, :required, :optional

In yesterday’s article, we learned that you can use different HTML attributes to let the browser validate form fields automatically. Of course, you might want to give the user feedback on the state of the field visually. For this, you can use these CSS selectors to target form fields based on the validation state.

/* target a valid field */
#exampleID:valid {
  background-color: green;
}
 
/* target an invalid field */
#exampleID:invalid {
  background-color: red;
}
 
/* target mandatory fields */
#exampleID:required {
  font-weight: bold;
}
 
/* target optional fields */
#exampleID:optional {
  font-weight: bold;
}

Transitions

With the CSS transitions, you can define simple animations that come into play if some CSS properties of an element get changed (in-depth-guide). Luckily you can use these in all major browsers so say goodbye to JavaScript-powered animations. An example of a transition could be:

#exampleID {
  transition: width 2s, height 2s, background-color 2s;
}

Animations

Another way to define animations directly in CSS is the animations properties. To generate an animation this way you need to define the animation itself and some keyframes which define the different stages. As always Mozilla has a more detailed guide on how to do this.

#exampleID {
  animation-duration: 3s;
  animation-name: slidein;
}
 
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
 
  to {
    margin-left: 0%;
    width: 100%;
  }
}

Summary

Above you have seen 5 different CSS properties which you can use cross-browser today. If you still need to support older browsers these polyfills can simulate these features for older browsers.

Picture by Peter Petrus