Upcoming Webinar: Jump Start Your Automated Testing Efforts With Record & Play Save Your Seat

Blog We love to talk!

Nov Tue

5 CSS Features Available Cross Browser Today

  •  11-3-2015

The CSS 3 standard contains lot’s 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 {
  border-radius: 10px 5px 3px 1px;
}

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 yesterdays 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 for a transition could be:

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

Animations

Another way to define animations directly in CSS are 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

No Comments

Leave a Reply

Your email address will not be published.