5 Hacks Everyone Should Know About CSS
Published on 28 July 15
Semaphore0
CSS is a must for every front end developer. It helps create style sheets that would help create intuitive interface and give the frontend some incredible features.
While CSS is not really a complex language, there are many aspects that remain unknown to you. There are some hidden features that you should ideally consider using to improve the interface and the interaction your front end gives out.
The @Supports Rule
CSS offers an excellent @supports feature which offers support to an unsupported feature on a particular browser. It checks if the particular feature has been supported or not using Modernizr, which is packed with well tested routines. With this @supports feature, you can easily manipulate the CSS behavior based on the support. Let's understand how @supports works
/* basic usage */
@supports(prop:value) {
/* more styles */
}
/* real usage */
@supports (display: flex) {
div { display: flex; }
}
/* testing prefixes too */
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}When to Use ID and Class?
Basic HTML styling elements don’t always meet your styling needs. This is probably why you will need to work out specific elements to style HTML. You can either add Classes (<div class = inner content> </div>) or Ids (<div>id = navigation></div>).
The class properties are known to override the IDs. In case you want to target a particular element, you can use ID, but if you want to target multiple elements along a single page multiple times, then you should ideally use class.
Multiple Images Background Feature
This feature comes with a cross browsing support. The images are stacked one over the other in this feature, and the syntax used here uses a simple comma as a separator.
This image background feature can be used whenever you want your frontend loaded with images in a very synchronized and aligned fashion.
Unicode CSS Classes
The best practices documentation includes "how to name a CSS class" at the very beginning.{
border: 1px solid #f00;
background: pink;
}
{
background: lightgreen;
border: 1px solid green;
}CSS Counters
With CSS counters you can boost and display a counter, either before or after the given element
/* initialize the counter */
ol.slides {
counter-reset: slideNum;
}
/* increment the counter */
ol.slides > li {
counter-increment: slideNum;
}
/* display the counter value */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}Conclusion
With these five CSS hacks, you can easily give out an incredible front end experience. You can check for browser compatibility before you actually release it to the browser. Hire web developers to give out a seamless web experience.
This blog is listed under
Development & Implementations
Community
Related Posts:
Post a Comment
