-
STEP-7XX
1-
Lecture1.1
-
-
STEP-700
11-
Lecture2.1
-
Lecture2.2
-
Lecture2.3
-
Lecture2.4
-
Lecture2.5
-
Lecture2.6
-
Lecture2.7
-
Lecture2.8
-
Lecture2.9
-
Lecture2.10
-
Lecture2.11
-
-
STEP-701
9-
Lecture3.1
-
Lecture3.2
-
Quiz3.1
-
Lecture3.3
-
Lecture3.4
-
Lecture3.5
-
Lecture3.6
-
Lecture3.7
-
Lecture3.8
-
-
STEP-702
5-
Lecture4.1
-
Lecture4.2
-
Lecture4.3
-
Lecture4.4
-
Lecture4.5
-
-
STEP-703
4-
Lecture5.1
-
Lecture5.2
-
Lecture5.3
-
Lecture5.4
-
-
STEP-704
4-
Lecture6.1
-
Lecture6.2
-
Lecture6.3
-
Lecture6.4
-
-
STEP-705
4-
Lecture7.1
-
Lecture7.2
-
Lecture7.3
-
Lecture7.4
-
iop-701 | CSS Browser Support | Lesson
Vendor-prefixed properties are offered by rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer) to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.
This allows properties to be set specific to each individual browser/rendering engine in order for inconsistencies between implementations to be safely accounted for. X Over time the prefixes will be removed as the final version of the property is implemented in that browser.
Originally, the point of vendor prefixes was to allow browser makers to start supporting experimental CSS declarations.
Let’s say a W3C working group is discussing a grid declaration (which, incidentally, wouldn’t be such a bad idea). Let’s furthermore say that some people create a draft specification, but others disagree with some of the details. As we know, this process may take ages.
Let’s furthermore say that Microsoft as an experiment decides to implement the proposed grid. At this point in time, Microsoft cannot be certain that the specification will not change. Therefore, instead of adding grid to its CSS, it adds -ms-grid.
The vendor prefix kind of says “this is the Microsoft interpretation of an ongoing proposal.” Thus, if the final definition of grid is different, Microsoft can add a new CSS property grid without breaking pages that depend on -ms-grid.
As of 2016, it’s important to understand that most vendors understand these prefix are creating un-necessary duplicate code and the need to specify 3 different css rules to get one effect working in all browser is not appreciated by the development community, as mentioned in this glossary about Mozilla’s view on Vendor Prefix on May 3, 2016:
“Browser vendors are now trying to get rid of vendor prefix for experimental features. They noticed that Web developers were using them on production Web sites, polluting the global space, and making it more difficult for underdogs to perform well.”
For example, just a few years ago, to set a rounded corner on a box you had to write:
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;
But now that browsers have come to fully support this feature, you really only need the standardized version:
border-radius: 10px 5px;
Finding the right rules for all browsers
Considering that there still is no standard for common css rules that work on all browsers being aware of tools like caniuse.com to check support of a rule across all major browsers.
You can also use pleeease.io/play. Pleeease is a Node.js application that easily process your CSS. It simplifies the use of pre-processors and combines them with best post-processors. It helps create clean stylesheets that support older browsers and offer better maintainability.
Input:
a {
column-count: 3;
column-gap: 10px;
column-fill: auto;
}
Output:
a {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
}
To that end it’s usually considered good practice to specify the vendor-prefixed version first and then the non-prefixed version, in order that the non-prefixed property will override the vendor-prefixed property-settings once it’s implemented; for example:
.elementClass {
-moz-border-radius: 2em;
-ms-border-radius: 2em;
-o-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
}
- ,,webpage,,Can I use… Support tables for HTML5, CSS3, etc,,
Browser support tables for modern web technologies
,,https://caniuse.com/
- ,,webtool,,Pleeease Play · Prefix CSS3, convert rem, CSS filters, pleeease.NEXT,,
Prefixes your CSS using Autoprefixer, provides fallbacks for rem units, adds opacity filter, converts CSS shorthand filters, packs media-queries, inlines @import and minifies the result.
,,http://pleeease.io/play/