Is there a way to set any style for a specific browser in CSS?
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a *
character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link>
or <style>
elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body
element) using JavaScript after doing browser detection in JS.
Remove browser specific style
/* For Firefox */
input[type='number'] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
How can I to specific the css rules for Chrome and IE in my HTML page or in SCSS file?
You can use IE conditional comments such as this:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
So you could use something like this:
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 10]>
<link href="iestyles.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
You can learn more about them here
where to check do I really need browser-specific css code?
Forget using W3 schools, its absolutely horrible (see here);
Check for vendor prefixes here: https://caniuse.com/
An even better answer however, is to let someone else deal with all that for you. For example, this is an excellent library which takes your CSS as input and transforms it to have the proper prefixes according to the filter you specify (generally expressed as n versions
or as a percent, like 92% coverage
): https://github.com/postcss/autoprefixer
The filter list can be found here: https://browserl.ist/?q=last%204%20version
You can add that into your build process and its 100% automatic, hands off.
If you're doing a one-off project or website without a build process, you can convert your CSS here https://autoprefixer.github.io/
Related Topics
Sunburst Effect with CSS3 Gradient
How to Layer Box-Shadows Using Z-Index
Create Clip-Path Wave CSS Edges
CSS Print Style Sheets - Examples
Margin:Auto Not Working Vertically
How to Get the Same Object with a Class in SCSS
Padding Within Inputs Breaks Width 100%
Css3 Transition ( Vendor Prefixes) Crashes Safari Immediately
ASP.NET MVC Bundling Cache. (Detecting CSS Files Changes) (Internal Behaviour)
Rotate Text in Bootstrap in Different Col Sizes
How to Create Vertical Text Using Only CSS
How to Merge .CSS Files with SASS (Or Other Tool)
Media Query for High Resolution Mobile 1080Px (Xperia Z etc)