- Web Developer's Reference Guide
- Joshua Johanan Talha Khan Ricardo Zea
- 349字
- 2021-07-09 20:18:24
Chapter 4. CSS Properties – Part 1
CSS properties are characteristics of an element in a markup language (HTML, SVG, XML, and so on) that control their style and/or presentation. These characteristics are part of a constantly evolving standard from the W3C.
A basic example of a CSS property is border-radius
:
input {
border-radius: 100px;
}
There is an incredible number of CSS properties, and learning them all is virtually impossible. Adding more into this mix, there are CSS properties that need to be vendor prefixed (-webkit-
, -moz-
, -ms-
, and so on), making this equation even more complex.
Vendor prefixes are short pieces of CSS that are added to the beginning of the CSS property (and sometimes CSS values too). These pieces of code are directly related to either the company that makes the browser (the "vendor") or to the CSS engine of the browser.
There are four major CSS prefixes: -webkit-
, -moz-
, -ms-
and -o-
. They are explained here:
-webkit-
: This references Safari's engine, Webkit (Google Chrome and Opera used this engine in the past as well)-moz-
: This stands for Mozilla, who creates Firefox-ms-
: This stands for Microsoft, who creates Internet Explorer-o-
: This stands for Opera, but only targets old versions of the browser
Google Chrome and Opera both support the -webkit-
prefix. However, these two browsers do not use the Webkit engine anymore. Their engine is called Blink and is developed by Google.
A basic example of a prefixed CSS property is column-gap
:
.column { -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; }
Knowing which CSS properties need to be prefixed is futile. That's why it's important to keep a constant eye on CanIUse.com. However, it's also important to automate the prefixing process with tools such as Autoprefixer
or -prefix-free
, or mixins in preprocessors, and so on.
However, vendor prefixing isn't in the scope of the book, so the properties we'll discuss are absent of any vendor prefixes. If you want to learn more about vendor prefixes, you can visit Mozilla Developer Network (MDN) at http://tiny.cc/mdn-vendor-prefixes.
Let's get the CSS properties reference rolling.
- HornetQ Messaging Developer’s Guide
- ExtGWT Rich Internet Application Cookbook
- Learning AWS Lumberyard Game Development
- C/C++常用算法手冊(第3版)
- Mastering macOS Programming
- Hands-On Full Stack Development with Go
- iOS自動化測試實戰:基于Appium、Python與Pytest
- OpenCV 3 Blueprints
- Android Development Tools for Eclipse
- 超簡單:用Python讓Excel飛起來(實戰150例)
- Apache Solr for Indexing Data
- React and React Native
- Clojure編程樂趣
- Go Programming Cookbook(Second Edition)
- 數據預處理從入門到實戰:基于SQL、R、Python