CSS3 Case Study

3.1.3 Knowing CSS3
CSS3 is the latest standard of CSS. It is backward compatible with earlier versions of CSS. You have learnt in chapter 1.1 how CSS styles can be added to your HTML documents to style various HTML elements. The CSS styles and rules created so far in this book were using basic features of CSS that were available in CSS1 and CSS2. The CSS1 specification was released in the year 1996 which had limited styling capabilities like font properties, text colouring, margins, borders and padding etc. CSS2 came in year 1998. It provided new capabilities like absolute, relative and fixed positioning of elements, bidirectional text etc.
New features of CSS3 allow you to create more presentable and aesthetically appealing HTML pages. Notable
The example below shown some of the form styling features of CSS3 –
Listing 3.1.26 (-- removed HTML --) (-- removed HTML --) (-- removed HTML --) (-- removed HTML --) input[type=text] { width: 100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 3px; font-size: 16px; background-color: white; background-image: url('searchicon.png'); background-position: 1px 1px; background-repeat: no-repeat; padding: 12px 20px 12px 40px;
}
(-- removed HTML --) (-- removed HTML --) (-- removed HTML --) (-- removed HTML --) Input text with icon inside (-- removed HTML --) (-- removed HTML --) (-- removed HTML --) (-- removed HTML --) (-- removed HTML --) (-- removed HTML --)
This creates the following output:

Self-assessment Questions

8. Which of the following is/are not a CSS3 feature? (select multiple if applicable)
a) Text Shadow effect
b) Web Fonts
c) Web Storage
d) Geolocation API

9. Which of the following is a feature introduced in CSS3?
a) border-radius
b) border
c) background
d) font-size

10. Is CSS3 backward
 CSS3 can be used to style HTML5 documents.
 CSS3 has introduced features like rounded borders, web fonts and shadow text.
 SVG being XML based, every element is available within the SVG DOM. This means we can attach JavaScript event handlers for an element.
 (-- removed HTML --) drawing is resolution dependent whereas (-- removed HTML --) drawing resolution independent.
 Before HTML5, application data had to be stored in cookies. Cookies are included in every server request. Local storage is more secure and it allows to store large amounts of data locally, without affecting website performance.
 Local storage is per origin, per domain and per protocol. It means all pages from one origin can store and retrive the same data.
 Local storage supports APIs such localStorage.setItem(), localStorage.getItem() and localStorage.removeItem().
 The job of a rendering engine is to display the requested contents on the screen. By default, the rendering engine can display XML, HTML and images.
 A service worker is a JavaScript file that runs separately from the browser thread and sits between the web pages and application servers.

Terminal