CSS3-CSS3 and modern web design

CSS3 and modern web design 1.1 modern web design concept 1.1.1 Accessibility first

The same piece of content can be styled in thousands of ways, but users around the world should still be able to access them, no matter how they access the web--, whether it's a mobile phone, a keyboard controller, or a screen reader. It is therefore important to lock down the users who are not using the corrective gloss level of the device.

1.1.2 Availability Second

Do users understand and find the information they want when they visit the content and services in the site? Why people don't think much: what information is most useful for users browsing their site, and then how do you show that information to make it easier for users to digest and assimilate? A concise, well-written and clearly provided copy is far more effective than just being flashy, exaggerated and professional.

1.1.3 Graceful downgrade and progressive enhancement

Graceful demotion and progressive enhancement both are used to solve the problem of how content behaves when the browser does not support all the features required to build the content. Graceful demotion refers to some special effects that simplify the content of the site, but still provide a perfect guarantee of accessibility and usability. Progressive enhancement is the first guarantee that content can be accessed by all browsers, on the basis of which support for usability and style enhancements is added to those advanced browsers. Fortunately, CSS3 can easily be progressively enhanced and gracefully degraded, and will work in older browsers as well. If most of the features are reasonably used, they are gracefully degraded to achieve the purpose that the underlying content is still accessible in browsers that are not supported. In addition, there are mechanisms to support or provide alternative content if necessary.

1.2 The thinking process of content

When a shiny feature is implemented in the Web interface, a good thinking process should run through it. 1) Create a basic, accessible HTML content. Content-based styles and behaviors should be as usable and style-enhancing as possible, but they are not required as a prerequisite for accessing content. 2) Think about whether you need to use all the dazzling and advanced techniques, or simply because you are a cool kid who wants to be held in the crowd. 3) Check that the implementation of your sword has been gracefully degraded while leaving the basic content accessible. 4) test content is accessible and can be displayed on multiple devices (e.g. different screen sizes, control mechanisms) 5) in the absence of CSS3 and WebGL, or in any case, for a particular user, the content is accessible. You'd better create a back-up mechanism that provides a content entry. Let the content be accessed by as many users as possible, this is what you always have to pay attention to the purpose. 1) Remember graceful downgrade/progressive enhancement. 2) use built-in features to provide alternatives to inaccessible content (for example, alt text, video captions). 3) Create your personal alternatives when there is no built-in mechanism (for example, use MODERNIZR to detect features and provide alternate styles). 4) Provide support for features that do not exist with a patch scheme.

1.3 CSS3 Module

Many modules are not yet complete, but this does not affect your use of some of these features. Many features have been supported by browsers, but you need to add a vendor prefix. 1) CSS color. In CSS3 CSS colors have many method definitions to specify colors, including RGB (red, green, blue), HSL (hue, saturation, brightness), Rgba and Hsla (as in the previous two, but with the introduction of an alpha channel that defines transparency), And a separate opacity property to control the transparency of the selection element. 2) CSS3 font. The module includes not only the definition of downloadable web fonts, but also other attribute definitions that affect the font (for example, font-feature-settings). 3) CSS3 text. It complements the CSS3 font, which makes the text dazzling. The CSS3 text includes entries familiar to CSS2, such as letter-spacing and Text-transform, and introduces new entries, such as hyphenation (hyphenation) and Text-shadow (text shading). 4) CSS3 Selector. Comparing the existing selectors in CSS2, the CSS3 selector defines a stronger, more robust mechanism. It moistens you apply a style on the element you specify. Almost all of these selectors have good cross-modern browser support. 5) Media inquiries. Media queries are the main way you currently provide different best layouts for the same content for different browser devices (widescreen and narrow screen). 6) CSS3 background and border. The background and border define any styles related to the background and borders, including rounded corners (Border-radius), shadow Effects (Box-shadow), and fancy border effects (border-image). 7) CSS multi-column layout. CSS multi-column layouts define a simple way to divide content into multi-column layouts. It is better to rearrange than an inexact and hack float. 8) CSS morphing. These two specifications (2D variants and 3D variants) apply to elements that change size, position, and shape in two and three dimensions. 9) CSS transitions. CSS transitions provide a smooth transition to a state change, such as a change in link color or a banner (banner) size when hovering over a mouse. CSS Animation. CSS animations implement flash-style declarative animations, where you can set different property values in detail using keyframes, and the browser automatically generates "motion tweens" between keyframes. CSS flexible box model layout. It is primarily applied to equal-width or equal-height allocations of rows and columns, which define new values for the display property to enable more powerful layout techniques. Although this attribute has been supported in a variety of ways in modern browsers, it is worth mentioning. CSS picture values and replacementsContent. This module includes useful features such as controlling background images and replacing content, some of which have started to be supported across browsers.

CSS3-CSS3 and modern web design