© Mikael Olsson 2019
Mikael OlssonCSS3 Quick Syntax Referencehttps://doi.org/10.1007/978-1-4842-4903-1_10

10. CSS Properties

Mikael Olsson1 
(1)
Hammarland, Finland
 
Now that the basics of CSS have been covered it is time to look at the multitude of properties that are available. In the following chapters, possible property values will be given using a formal notation, such as the one shown here:
text-shadow : inherit | none | <offset-x> <offset-y>
              [<blur-radius>] [<color>]

This notation means that the text-shadow property can have one of three different kinds of values. The default value is listed first; in this case, it is inherit. Because the inherit keyword can be set for any property, it will not be included in the list unless it is the default value. The second value, none, is also a keyword. It is the initial value for this property and can be applied to disable an inherited property effect.

The third option in this notation includes a set of four values—two required ones and two optional ones—as indicated by the square brackets ([]). The angle brackets (<>) show that they are not keywords; they are other value types. In this case, they are three length values and a color value. Following this notation, the following declaration shows a valid example use of the text-shadow property:
text-shadow: 1px 1px 1px red;

Generic Keywords

In addition to inherit, there are two other generic property keywords you might come across in CSS: initial and unset. Both generic keywords were introduced in CSS 3 and can be set on any properties.

The initial keyword applies a property’s initial value to an element, as defined by the CSS specification. It is supported in Chrome 4+, Firefox 19+, Safari 3.2+, Opera 15+, and Edge 12+. IE 6-11 has no support for this keyword, but Microsoft’s Edge browser started out with support for it. Keep in mind that Edge started out with version 12 superseding IE 11, so a CSS feature supported in IE is also supported in Edge. Until IE usage drops sufficiently low the usefulness of the initial keyword is limited. It is recommended to instead explicitly specify the initial value for a given property to reset it.

The third generic keyword is unset, which is a combination of the initial and inherit keywords. It resets the property to its inherited value, if there is one; otherwise, it sets the property to the initial value. Support for the unset keyword is limited to Chrome 41+, Firefox 27+, Safari 9.1+, Opera 28+, and Edge 13+. No version of IE supports this keyword.

Quirks Mode

When HTML and CSS became standardized by the World Wide Web Consortium (W3C), web browsers could not just comply with the standards because doing so would break most web sites already in existence. Browsers instead created two separate rendering modes: one for new standard compliant sites (full standards mode) and one for old legacy sites (quirks mode).

In full standards mode, the browser does its best to render the page in accordance with HTML and CSS specifications, which is what you want when designing a website. In contrast, quirks mode accounts for bugs in legacy browsers (particularly IE 4 & IE 5) to make old web pages display as their authors intended. Browsers use the doctype for the sole purpose of deciding between full standards mode and quirks mode. A valid doctype at the start of a web document, such as the HTML 5 doctype seen following, ensures that the page is rendered in full standards mode:
<!DOCTYPE html>
<html> ... </html>

This doctype triggers full standards mode in all major browsers, dating back as far as IE 6.

Vendor Prefixes

Many browsers begin incorporating new CSS properties long before their specification becomes stable. Because these implementations are experimental, their property names include a vendor prefix to indicate that the specification could potentially change in the future.

The major vendor prefixes include -moz for Firefox; -ms for Internet Explorer and Edge; -o for Opera prior to version 15; and -webkit for Chrome, Safari, Android, and iOS. As of version 15.0 Opera also started using the WebKit rendering engine and therefore added support for the -webkit prefix in parallel with the -o prefix. For example, support for the CSS 3 border-radius property can be increased by using the following vendor prefixes. Note that the unprefixed version should always be included last.
.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6-2.0 */
  -webkit-border-radius: 3px;
  /* Firefox 1-3.6 */
  -moz-border-radius: 3px;
  /* Opera 10.5+, IE 9+, Safari 5+, Chrome 1+,
     Firefox 4+, iOS 4+, Android 2.1+ */
  border-radius: 3px;
}

As time goes on, the new property’s specification becomes stable, and browsers drop the vendor prefix. Given more time, web users abandon old browsers in favor of new versions, and the need for vendor prefixes diminishes. This has already occurred for the border-radius property, and developers are now encouraged to drop the prefixes, making things a little easier for web developers worldwide .

Progressive Enhancement

When deciding whether to use a recent CSS feature, it is important to consider how your site will look without it. If the feature enhances the appearance of your site, such as the CSS 3 border-radius property, you might want to start using the feature, even when it is viewable by only a small percentage of your visitors. Time works in your favor, and as people abandon old browsers, a greater number of your visitors can see the feature, which enhances their experience on your site. This is the essence of progressive enhancement.

On the other hand, if your site depends on the feature and appears broken without it, you need to carefully consider how well supported the feature is and whether there are fallbacks or scripts you can make use of to increase this support. There are often many ways to achieve the same result in CSS, so it is a good idea to choose a method that is well supported by all major browsers for the key elements of your site, such as the layout.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.193.232