MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

5 Hacks Everyone Should Know About CSS

Published on 28 July 15
979
0
0
5 Hacks Everyone Should Know About CSS - Image 1

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.




















5 Hacks Everyone Should Know About CSS - Image 1

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 (

) or Ids (id = navigation>

).

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

Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top