How to target only IE (any version of Internet Explorer) within a stylesheet?

Internet Explorer 9 and lower : There are some conditional comments to load an IE-specific stylesheet for any version (or combination of versions) that we wanted to specifically target. like below using external stylesheet.

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

However, beginning in version 10, conditional comments are no longer supported in IE.

Internet Explorer 10 & 11 : Create a media query using -ms-high-contrast, in which we place our IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12 : We can use the @supports rule Here is a link with all the info about this rule

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

Inline rule IE8 detection

There are some options but it is only detect IE8 and below version.

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

 

 

Source: http://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet?answertab=active#tab-top

Easy way to vertically center anything by CSS3

Vertical align by CSS is the thing that I always struggle to fix. Some times succeed and some times not depends on DOM structure of that component. Time, when we use extensively TABLE for layout structure then it was super easy to align element vertically. But the time of CSS when we start DIV base layout then it has become some challenging staff to do.

Anyway, great technique of CSS3 we can solve it with some features like Flex Box, Grid Layout will make this kind of thing even easier. But there is one other way to solve it and it need only three lines of code. Following are the lines:

.do-vertical-center{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform:translateY(-50%); /* prefix for IE 9 */
	-webkit-transform:translateY(-50%); /* prefix for Safari and Chrome */
}

FYI: When you use position absolute you can apply relative position on parent DOM so that it will positioning from that parent but it depends on your structure.

I hope it will help you and save some time to fix Vertical alignment without table. Indeed!

How to style radio button and checkbox

Hello there, hope you are doing well! Today I am going to present how to style radio button and checkbox.

Ever wondered! to customize radio button and checkbox, but without JavaScript? Thanks to CSS3 you can! With CSS3 we can customize web presentations to be almost anything we want it to be. In this post, as the title says, I am going to customize the look of radio button and checkbox.

How to style radio button and checkbox

DOM structure for Radio button

<label class="custom-radio-button">
 <input type="radio" /> 
 <span class="helping-el"></span>
 <span class="label-text">Customize</span>
</label>

CSS for customize Radio button

label.custom-radio-button input[type="radio"] {
	opacity:0;
}

label.custom-radio-button input[type="radio"] ~ .helping-el {
	background-color: #FFFFFF;
	border: 2px solid #009688;	
	border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
    padding: 11px;
    position: relative;
    top: 3px;
}

label.custom-radio-button input[type="radio"]:checked ~ .helping-el {
    border: 2px solid #009688;
}

label.custom-radio-button input[type="radio"]:checked ~ .helping-el:after {
	background-color: #009688;
    border-radius: 50%;
    content: " ";
    font-size: 33px;
    height: 16px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 16px;
	
}

DOM structure for Checkbox

<label class="custom-checkbox">
 <input type="checkbox" /> 
 <span class="helping-el"></span>
 <span class="label-text">Customize</span>
</label>

CSS for customize Checkbox

label.custom-checkbox input[type="checkbox"] { 
	opacity:0;
}

label.custom-checkbox input[type="checkbox"] ~ .helping-el{
	background-color: #FFFFFF;
	border: 2px solid #009688;	
	border-radius: 2px;
    display: inline-block;
    padding: 10px;
    position: relative;
    top: 2px;
}

label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el{ 
	border: 2px solid #009688;
	background-color: #009688;
}

label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el:after {
    color: #FFFFFF;
    content: "\2714";
    font-size: 20px;
    font-weight: normal;
    left: 2px;
    position: absolute;
    top: -6px;
    transform: rotate(10deg);
}

Conclusion

Alright, so how cool it is, right? 🙂

BTW: This technique to customize radio button and checkbox input type and certainly you can enhance the look to be more stunning.