The first chapter of graphic css3--reveals the veil of CSS3

Chapter One unveils the veil of CSS3

If you focus on the front-end technology, then the CSS must not be unfamiliar, you must have heard of CSS3. Before using CSS3, you should have a basic understanding of the ins and outs of this new generation of language stylesheet languages.

1.1 What is CSS3

CSS3 is not a new language. If you touch CSS, you know that CSS is another independent but not unimportant part of creating a Web page. CSS is a cascading style sheet, a style language that tells the browser how to render your Web page.

CSS3 is the latest version of the CSS specification

New features of 1.1.1 CSS3

CSS3 has a lot of new features, and here are some of the new features that are supported by browsers that are more perfect and more practical.

1. Powerful CSS3 Selector
2. The visual effect of discarding pictures
3. The transformation of the background
4. Box model changes
5. Shadow effect
6. Multi-column layout and flexible box model layout
7. Web fonts and Web font icons
8. Color and transparency
9. New method for fillet and border
10. Deformation of the box container
11. CSS3 Transitions and animation interaction effects
12. Media features and Responsive layouts

The development status of 1.1.2 CSS3

Each module of the CSS3 has its own update (schedule) time. Interested can come here-(point me to see the progress) to see the detailed progress of the current development of CSS3.

1.1.3 can I use CSS3 now?

CSS3 is still in the process of improvement, many of the functions are still in the draft stage, but some of the modules into the "candidate recommendation" state, the web design can be fully used in these modules. I generally look through the can I use to view a property of the browser support situation.

1.1.4 What are the benefits of using CSS3?

What are the benefits of using CSS3 compared to CSS? The most obvious is that CSS3 can make the page look very flashy, very cool, so that the site design icing on the cake, but its benefits far more than that. In most cases, the use of CSS3 is not only conducive to development and maintenance, but also to improve the performance of the site. At the same time, can increase the accessibility of the site, usability, so that the site can adapt to more equipment, and even optimize the site SEO, improve the site search ranking results. The following describes the unique benefits of CSS3.

1. Reduce development and maintenance costs
2. Improve page performance

1.2 Browser support for CSS3

To know that users can experience the new features of CSS3, it is important to understand how well the current browser supports CSS3 features. I generally look through the can I use to view a property of the browser support situation.

1.2.1 Classic review: Illustrated browser Wars

Slightly

Market share of 1.2.2 Browser

• Browser Domestic market share

2016-1 to 2016-11 Baidu statistics results view latest share

• Browser Global market Share (abbreviated)

1.2.3 Mainstream browser support for CSS3

Fortunately, most of the CSS3 features have good browser support. Major mainstream browser to CSS3 support more and more perfect, once let how many front-end developers heartbreak of IE also began very near CSS3 standard ranks. Of course, even if the CSS3 standard is completed, it is a lengthy process for modern browsers to be popular with most users. If you want to use CSS3 to beautify your site now, it is necessary to have a comprehensive understanding of the support of the major mainstream browsers for their new technologies.

1. Support for CSS3 attributes by mainstream browsers (data source Findmebyip)

2. Support for CSS3 selectors by mainstream browsers (data source Findmebyip)

1.3 Progressive Enhancement

Progressive enhancement is not a technology, but a way of development, but also a web design concept. First, consider the question: "Does the site need to look the same in every browser?" "Take this issue to see progressive enhancement."

1.3.1 Progressive enhancement and graceful downgrade

As mentioned above, progressive enhancement is not a technology, but a way of development, but also a web design concept. When writing a Web page, first of all, ensure that the core of the implementation of the function, so that any low-end browser can see the site content, and then consider the use of advanced but non-essential CSS and JavaScript enhancements, for the current and future browsers to provide better support, to give users a better experience.

When designing, consider whether the low-end device users can see all the content, and then on this basis for high-end users to design. Not only for high-end equipment users to provide a perfect application, but also for different performance-level devices for users to design different levels of less perfect applications. This becomes an "elegant downgrade".

Advantages of 1.3.2 Progressive enhancement

Deliver the best possible user experience to as many users as possible

The progressive enhancement of CSS is different from the hack of CSS. Hack is a way for browser vendors to enhance their own competition, and incremental enhancements play an icing on the cake. So the former should be avoided as far as possible, and the latter should be used appropriately.

1.4 CSS3 status and future 1.4.1 who is using CSS3

Domestic and foreign use of CSS3 characteristics of the production site more and more, especially some excellent personal site, but also the use of superb.

The future of 1.4.2 CSS3

CSS3 undoubtedly brings a qualitative leap to web front-end development. Although the current CSS3 is not fully popular, and the browser is not fully supported, but for our active to learn and practice is not contradictory, master and learn CSS3 will be the trend. CSS3 will be the pioneer technology that leads us into the exciting world of writing Web pages. Developers can more easily create powerful, easy-to-maintain web sites.

Learning CSS3 technology will be more valuable as the market share of older browsers is declining. This is one of the technologies that must be mastered as a good front-end developer and a trend for front-end developers.

Of course, learning a new technology can not follow suit, need to think rationally, this kind of rational thinking does not mean to cower in the new technology, but also should understand the difficulties and risks of learning new technology can be encountered. Only in this way can we better harness the CSS3.

1.5 Summary of this chapter

This chapter mainly introduces what is the development of CSS3, CSS3, the new features, and the browser's support to CSS3, and introduces the progressive enhancement design concept. Through the study in this chapter, we can have a preliminary understanding of CSS3. There are many benefits to learning CSS3, which keeps you at the forefront of web design, increases your professional skills and competitiveness, and helps you to shorten the distance from top designers or developers.

The first chapter of the schematic css3--CSS3 's veil "