Briefly describe how web designers can use CSS3 technology well

In this article, we will examine the advantages of CSS3 and look at how some web designers use them. Finally, we will learn what we can get from CSS3 and how we can use its new features in our projects.

I saw a good article about the new technology of CSS3 in SmashingMagazine a few days ago. It introduced in detail the new features of CSS3 and how to use it, including: browser-specific attributes, selectors (attributes Selector, hyphen, pseudo-class, pseudo-element), RGBA and transparency attributes, multi-column layout, multiple background images, Word Wrap, text shadow, CSS rounded corners, border image, box shadow, box size, media query, voice, and details which browsers each new technology is currently compatible with. Script House originally wanted to translate this article into a Chinese version and share it with everyone, but found that a Chinese person had already completed the translation, so I was lazy and reproduced someone else’s translation. I would like to thank the bloggers of Front-end Observation for their hard work in translating this article for everyone. Contributed such valuable learning materials.

If you love front-end development and are interested in CSS, then you must not miss this article.

Cascading style sheets were introduced 13 years ago, and the widely used CSS 2.1 standard was created 11 years ago, so we are obviously a long way from where we were back then. It’s quite remarkable how much website development has advanced in that time—in fact, we couldn’t have imagined it.

Why is it that, when it comes to CSS, we have been so reluctant and afraid to try it in the past? Why do we still use nasty hacks and techniques that rely onJavaScriptto write styles? Why can't wetake advantage of the rich CSS3 features and tools available in modern browsersand take our design quality to the next level?

It’s time to introduce CSS3 features into our projects without fear of problems as we gradually add css3 features and selectors to our stylesheets. Making our customers aware of the benefits ofCSS3(and making old browsers disappear faster) is something we can do - and we should, especially if it makes websites more flexible and requires less development and maintenance costs.

In this article, we’ll examine the benefits of CSS3 and take a look at how some web designers use them. Finally, we will learn what we can get from CSS3 and how we can use its new features in our projects.

Using browser-specific properties

In order to use most CSS3 features, we have to useManufacturer-specific extensionsalong with the original properties. The reason is that until now, most browsers only support some CSS3 properties. And unfortunately, some properties may not even end up being recommended byW3C, so it's important to distinguish them from standard properties by specifying browser-specific properties (and then in case they are redundant Use standards-compliant styles to override them).

Of course, the disadvantage of this approach is that it will result in a messy style sheet and inconsistent performance of the website between browsers. After all, we don't want to reintroduce the need for private browser hacks in our stylesheets. Internet Explorer's infamous marquee, blink, andothertags were used in numerous style sheets and became a legend in the 1990s; they still make many existing websites (in other browsers) ) behave inconsistently and can even be difficult to read. And we don’t want to put ourselves in the same situation now, right?

However, a websitedoes not need tolookstrictly consistent across all browsers. Sometimes it is possible to use private properties in a browser to achieve specific effects.

The most common private propertiesare for Webkit core browsers (e.g., Safari), which start with -webkit-, and Gecko core browsers (e.g., Firefox), Starting with -moz-, Konqueror (-khtml-), Opera (-o-) and Internet Explorer (-ms-) all have their own attribute extensions (currently only IE8 supports the -ms- prefix)

As professional designers, we have to pay attention:

Using these private properties will make our style sheet fail to pass verification. So putting them into the final version of the style is currently rare. But in some cases, such as experimentation or learning, we can at least consider writing them into a style sheet together with standard CSS properties.

Extended reading

• Vendor-specific extensions and W3C

• ##Vendor-specific extensions to CSS3

• Vendor-specific properties

1. Selectors

CSS selectorsare incredibly powerful tools: they allow us tospecify specific ## in a tag #HTML elementswithout having to use redundantclass, IDs or JavaScripts. And most of them are not newly added to CSS3, but have not been widely used as they should be. Advanced selectors are very useful if you are trying to achieve a clean, lightweight tag and better separation of structure and performance. They can reduce the number of classes and IDs in tags and make it easier for designers to maintain style sheets.

Attribute Selectors

Three new attribute selectors were added to CSS3:

• [att^="value"]
  Matches elements containingattributesthat begin with a specific value

• [att$="value"]
  Matches elements containingattributesthat end with a specific value

• [att*="value"]
  Matches elements containingan attributewith a specific value

An element containing an attributewith a specific value

tweetCCUse an attribute selector to specify links that have a title attribute and end with the characters "tweetCC":

Browser support:Only IE6 does not support CSS attribute selectors. IE7 and IE8, Opera, Webkit core and Gecko core browsers are all supported. So it is safer to use attribute selectors in your styles.Hyphens

The only newly introduced hyphen in CSS3 is the universal sibling selector (sibling). It targets all sibling elements of an element that have the same parent node.

For example, to add a gray border to a picture at the same level of a specific p (p and the picture should have the same parent node), it is enough to define the following style in the style sheet:

1 2 3 4 5 6 7 8 9

a [title$="tweetCC"]{ position:absolute; top:0; #right:0; display:block; width:140px; height:140px; text-indent:-9999px; }

1 {

2 3 ##p~img

border :1pxsolid#ccc;}

Browser support:

All major browsers support this universal sibling selector except our favoriteIE6
!Pseudo-Classes

Perhaps the biggest addition to CSS3 are the new pseudo-classes. Here are some of the most interesting and useful ones:

:nth-child(n)

Lets you specify an element based on its position in the list of children of the parent node. You can use numbers, numeric expressions, or the odd and even keywords (perfect for zebra-style lists). So if you want to match a
• group

  of 3 elements after the fourth element, you can simply use:
  

  :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/

  :nth-last-child(n)
The idea is the same as the previous selector, but it matches elements from the back (in reverse order). For example, in order to specify the last two paragraphs in a p, we can use the following selection Device:

• p p:nth-last-child(-n+2)

  
  

  :last-child
Matches the last child element under a parent node, which is equivalent to:nth-last-child(1)

• :checked
  matches the selected element, such as

  checkbox

• 
  :emptymatches Empty element (no child elements).

• :not(s)
  Matches all elements that do not match the specified statement(s). For example, if you want all paragraphs that do not use the "lead" class to be displayed in black, you can write like this:

• 
  p
  :not([class*="lead"]) { color: black; }.
  Andrea Gandino

  in his Use:last-child on the website to specify the last paragraph of each blog post for the selector, and set its outer spacing (
margin

) to 0:

##1

2 3 .

#primary

textp:last-child{margin: 0;} Browser support:Webkit core and Opera browsers support all new CSS3 pseudo-classes, Firefox 2 and 3 (Gecko core) only support:not(s), :last-child, :o nly-child, :root, :empty, :target, :checked, :enabled and :disabled, but Firefox 3.5 willwidely support CSS3 selectors. The Trident core browser (Internet Explorer) actually does not support these pseudo-selectors. Pseudo-element The only pseudo-element introduced in CSS3 is ::selection. It allows you to specify the elements that are highlighted (selected) by the user. Browser support:Currently, no Internet Explorer or Firefox browser supports the ::selection pseudo-element. Safari, Opera andChrome are all supported. Extended Reading Selectors Level 3: W3C Working Draft ##CSS3: Attribute selectors: CSS3.info Compatibility table: CSS3 Selectors CSS selectors and pseudo selectors browser compatibility CSS3 Attribute Selectors ::selection ##General Sibling Selector ##CSS3 Pseudo-classes 2. RGBA and transparency RGBA allows you to not only set the color, but also set the transparency of the element. Some browsers do not yet support it, so it is best to set the non-transparent color attribute supported by other browsers in front of RGBa. Tim Van Damme uses RGBA on the hover effect of the link On this website, Tim Van Damme On the mouse hover effect RGBa is used; for example, on the network link on his homepage: ##1 2 3 #networks When setting an RGBA color, we must set the red, blue, and green values in sequence, which can be 0-255 or percentage. The transparency value should be between 0.0 and 1.0, for example 0.5 represents 50% transparency. The difference between RGBA and opacity is that the former will only be applied to the specified element, while the latter will affect the element we specify and its sub-elements. 4 li a:hover,#networks li a:focus{background :rgba(164,173,183,.15);} Here is an example showing how we add 80% transparency to a p: ##1 2 3 opacity p { : 0.8 ;} Browser support:RGBA is supported by Webkit kernel browsers. Not supported by all versions of IE. Firefox 2 doesn't support it either, but Firefox 3 and Opera 9.5 both support it. Opacity is supported by Opera, Webkit core and Gecko core browsers. All versions of IE are also not supported. IE only supports its own damn filter Extended reading: CSS ColorModuleLevel 3: W3C Working Draft RGBA colors: CSS3.info ##RGBA color space Is CSS3 RGBa ready to rock? ##Super-Awesome Buttons with CSS3 and RGBA 3. Multi-column layout This is the new CSS3 selector that allows you to implement multiple columns without using multiple p tags layout. The browser interprets this attribute and generates multiple columns, giving the text a multi-column structure that mimics a newspaper. tweetCC uses the CSS3 multi-column selector on its homepage tweetCC displays the introduction text on its homepage For four columns. These four columns are notfloating; instead, the designer uses the following CSS3 multi-column layout: ##1 2 ##.index We can define three things through this selector: column number (column-coun), column width (column-width, not used in the example) and space/gap between columns (column-gap). If column-count is not set, the browser will fit as many columns as the width allows. In order to add a numerical separation in each column time, we can use the column-rule attribute, whose function is similar to the border attribute: 3 4 5 6 #contentp{-webkit-column-count: 4;-webkit-column-gap: 20px;-moz-column-count: 4;-moz-column-gap: 20px;} 1 2 3 column-rule ##p { : 1px solid#00000;} The above attribute will not have any effect in the browser because it does not have columns. It can be used with the above example. Related properties: column-break-after, column-break-before, column-span, column-fill. Browser support:Multi-column layout is currently supported by Safari 3+, chrome, and Firefox 1.5+. Extended reading: CSS3 module: Multi-column layout: W3C Working Draft Columns CSS3 – Multi-Column Layout Demonstration CSS3 Columns Designing tweetCC ##Introduction to CSS3 – Part 5: Multiple Columns 4. Multiple background images CSS3 allows you to use multiple attributes such as background-image,background-repeat,background-size,background-position,background-originandbackground-clipetc. add multiple layers of background images to an element. The easiest way to add multiple backgrounds to an element is to use shorthand code. You can specify all the above attributes into a statement, but the most commonly used ones are image, position and repeat: The first image will be the one "closest" to the user. A more complex version of this property could look like this: ##1 p 2 3 4 5 { background:url(example.jpg)topleftno-repeat, url(example2.jpg)bottomleftno-repeat, url(example3.jpg)centercenterrepeat-y;} 1 2 3 4 5 p{ background:url(example.jpg)topleft(100%2em)no-repeat, url(example2.jpg)bottomleft(##100%2em)no-repeat, url(example3.jpg)centercenter(10em10em)repeat-y; } Here, (100% 2em) is the value of background-size; the first background image will will appear in the upper left corner and will be stretched to 100% of the p's width and 2em height. Because only a few browsers support it, and because not displaying the background on the website damages the visual effect of the website, this is not a widely used attribute. Nonetheless, it's clear that it can greatly improve a designer's workflow and significantly reduce the number of tags - relative to other ways of achieving the same effect. Browser support:Currently, multiple background images are only available in Safari/chrome and Konqueror Extended reading: Layering multiple background images ##Multiple backgrounds with CSS3 and CSS3.info Introduction to CSS3, Part 6: Backgrounds 5. Word Wrap word-wrap attribute is used to prevent it from being too long Thestringoverflowed. Two attribute values normal and break-word are available. The normal value (default) only truncates text at allowed breakpoints, such as hyphens. If break-word is used, the text can be truncated wherever necessary to fit the allocated space and prevent overflow. The WordPress backend uses word-wrap in the data table.In WordPress In the control panel, the word-wrap attribute is used for elements intables; for example, in lists of posts and pages: Browser support:word-wrap is supported by Internet Explorer and Safari/chrome. Firefox will support it in version 3.5. Extended reading: Force Wrapping: the 'word-wrap' property — CSS Text Level 3: W3C Working Draft ##word-wrap: CSS3.info CSS word-wrap ##word-wrap: Mozilla Developer Center Although it already exists in CSS2, is not widely used CSS properties. But it will be widely adopted in CSS3. This property gives designers a new cross-browser tool to add a dimension to designs to make text stand out.Despite this, you need to make sure that the text in your design is readable in case the user's browser does not support CSS3 advanced properties. Give the text and background color enough contrast to prevent the text-shadow attribute from being rendered or understood correctly by the browser. Beakapp uses the text-shadow attribute in its website: content area. uses the text-shadow property for the content area to add depth and dimension to the text and make it stand out - rather than using some kind of image replacement technique. This property is currently only available in Safari and Chrome.The main menu of this website uses the following CSS: 1 6. Text-shadowtext-shadowBeakApp .com 2 3 #.widefat *{word-wrap:break-word ;} ##1 2 ##.signup_area Here we use the shadow color (using RGBA, described earlier), then the right (x coordinate) and bottom (y coordinate) offset, and finally Blur radius If you want to use multiple shadows on one text, you can use commas to separate them. For example: 3 p{text- shadow :rgba(0,0,0,.8)01px0;} ##1 2 3 4 5 p { text-shadow :red4px4px2px,yellow -4px-4px2px,green -4px4px2px;} Browser support:Webkit core browser and Opera 9.5 support text-shadow. Internet Explorer does not support it, Firefox will support it in the upcoming 3.5 version. Further reading: Text Shadows: the 'text-shadow' property — W3C Working Draft Text shadows: Web Style Sheets CSS tips and tricks ##Text-shadow,Photoshoplike effects using CSS — CSS3.info ##Make Cool And Clever Text Effects With CSS Text-Shadow Safari's Text-Shadow Anti-Aliasing CSS Hack ##text-shadow text-shadow: Mozilla Developer Center 7. @font-face attribute Although it is the most anticipated A CSS3 feature (even though it was introduced in CSS2), @font-face is still not as widely adopted on websites as other CSS3 properties. This is mainly due to font licensing and copyright issues: embedded fonts can easily be removed from websites Uploading and downloading is a major concern for font manufacturers. Despite this, it seems that the issue has begun to be resolved. TypeKit promises to develop a solution to make it easier for designers and font vendors to unify licensing issues, which will significantly enrich typography in website design and make the @font-face attribute usable in real work. The Mozilla Labs JetPack website uses the font-face rule to use the DroidSans font. One of the few websites that uses this attribute is the newly launchedJetPack MozillaLabs . 1 2 To use embedded fonts in your website, you must create each style independently ( For example, normal , 3 4 ##@font-face{ font-family:'DroidSans';src: url('../fonts/DroidSans. ttf')format('truetype');} bold anditalic). Make sure to only use fonts that are licensed for use on the website and give the font designer some credit when needed.After defining the @font-face rule, you canreferencethe font using the ordinary font-family attribute: 1 2 3 #p { font-family :"DroidSans";} If a browser does not support @font-face, it will use the next font specified in the font-family (CSS font library) property. For supported browsers, this may be feasible for some websites if the @font-face font is a luxury item (used by only a few elements); however, if the font plays a major role in the design or is corporate part of the visual features, you may want to use other solutions, such assIFRorCufón. Still, keep in mind that these tools are better suited for headlines or shorter text, as copying and pasting such content is difficult and not user-friendly. #Wouldn’t it be great to use this type of font in your website? Dave Shea's experiment usingCufónandMuseo Sans. very beautiful! Browser support: @font-face is supported by Safari 3.1+ and chrome. Internet Explorer supportsfonts. Opera 10 and Firefox 3.5 will support it.Font. Opera 10 and Firefox 3.5 will support it. Extended reading: Font Descriptions and @font-face — W3C Working Draft Web fonts with @font-face @font-face — Sitepoint Fonts available for @font-face embedding ##@font-face beautiful fonts with @font-face Introducing Typekit 8. Rounded corners (border radius) Border-radius You can add rounded corners to HTML elements without a background image. Today, it is probably the most used CSS3 property, simply because using rounded corners is better and does not conflict with design or usability. Instead of adding Javascript or more HTML tags, just add some CSS properties and think of the good side. This solution is clear and relatively efficient, and will save you from spending hours looking for clever browser solutions and Javascript-based corner rounding. Sam Brown’s blog uses border-radius. in the title, category and link Sam Brownuses the border-radius attribute extensively in the titles, categories, links and p of his blog. Using images to achieve this effect will be more time-consuming, which is one of the reasons why using CSS3 properties in the project is an important step to improve development efficiency To add rounded corners to the category links, Sam used the following CSS snippet: We can go one step further and add original CSS3 properties and Konqueror property extensions, as follows: ##1 h2 span 2 3 4 5 6 { color:#1a1a1a; padding:.5em;-webkit-border-radius: 6px;-moz-border-radius: 6px;} 1 2 3 4 5 6 7 8 ##h2 span { color:#1a1a1a; padding:.5em;-webkit-border-radius :6px;-moz-border-radius :6px;-khtml-border-radius :6px;border-radius :6px; } If we want to apply this property to a specific corner of our element, we can specify each corner individually: Browser support: border-radius is only supported by all versions ofIE browserand Opera, but is supported by Webkit and Gecko core browsers. Extended reading: border-radius: W3C Working Draft Border-radius: create rounded corners with CSS! — CSS3.info ##Introduction to CSS3, Part 2: Borders An Ode to border-radius ##CSS3 Border-Radius and Rounded Corners The border-image attribute allows you to set an image on the border of an element, allowing you to choose from the usual solid, dotted and other Freed from border styles. This attribute gives designers a better tool to easily define the border style of design elements than the background-image attribute (for advanced designs) or the boring default border style. We can also explicitly define how a border can be scaled or tiled. The SpoonGraphics blog uses the border-image attribute for its image borders. SpoonGraphis blog, border-image is used for the picture border, as shown below: ##p 9. Border ImageIn 1 2 3 4 5 6 7 8 9 10 11 12 13 14 { -moz-border-radius- topright: 6px;-moz-border-radius-topleft: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px;-webkit-border- top-right-radius: 6px;-webkit-border-top-left-radius: 6px;-webkit-border-bottom-right-radius: 6px;-webkit-border-bottom-left-radius: 6px;border-top-right-radius: 6px;border-top-left-radius: 6px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;} 1 2 3 4 5 6 #content.postimg{ border:6pxsolid#f2e6d1;-webkit-border-image: url(main-border.png##)6repeat;-moz-border-image: url(main -border.png)6repeat;border-image: url(main-border.png## )6repeat;} To define border-image, we must specify the image address, which part of the image will be clipped and used on each side of the element, and whether the image will be scaled or tiled. To make a p that uses the image below as a border, we should use the following code (we will add Opera and Konqueror support for this example): The last value of this property can be stretch (default), round (only one tile integer ##1 2 3 4 5 6 7 8 p { border-width:18px25px25px18px;-webkit-border-image :url(example.png)18 25 25 18 stretch stretch;-moz-border-image :url(example.png)18 25 25 18 stretch stretch;-o-border-image :url(example.png##)18 25 25 18 stretch stretch;-khtml-border-image: url(example.png)18 25 25 18 stretch stretch;border-image: url(example.png##)18 25 25 18 stretch stretch;} times the image is filled in where allowed) or repeat. In our example, the top, bottom, left and right borders of the image are stretched. If we only want the top and bottom borders to be stretched, we can use the following CSS: 1 2 3 4 ##p { (...) border-image: url(example.png)18 25 25 18 stretchrepeat;} We can specify each corner individually, if we want to use a different image for each corner: 1 2 3 4 5 6 7 8 9 10 p{ border-top-image:url(example.png)5 5 stretch; border-right-image:url(example.png)5 5 stretch; border-bottom-image:url(example.png)5 5 stretch; border-left-image:url(example.png)5 5 stretch; border-top-left-image:url(example.png)5 5 stretch; border-top-right-image:url(example.png)5 5 stretch; border-bottom-left-image:url(example.png)5 5 stretch; border-bottom-right-image:url(example.png)5 5 stretch; } If the browser does not support the border-image attribute, it will ignore these attributes and only apply other defined border attributes, such as border-width andborder-color. Browse Browser support: border-image is currently only supported by Webkit core browsers. Not sure if the next version of Firefox will support it. Extended reading: The 'border-image' property: W3C Working Draft Border-image: using images for your border — CSS3.info ##border-image in Firefox border-image demonstration page Replicating iPhone Buttons the “webkit” way! 10. Box-shadow The box-shadow attribute can add shadows to HTML elements without additional tags or background images. Like the text-shadow attribute, it enhances the detail of the design; and because it doesn't affect the readability of the content, it can be a great way to add that extra feel/effect. 10to1 uses the box-shadow attribute.# for itsnavigationBeijing and hoverstatus##10to1Add a simple shadow to its navigation area and apply this attribute to the hover effect of the navigation link: The box-shadow property can use multiple values: horizontal offset, vertical offset, blur radius, stretch radius and shadow color. Horizontal and vertical offsets and shadow colors are used the most. To apply a red shadow on a p with the right and bottom offset 4px and no blur, we can use the following code: 1 2 3 4 5 6 7 8 9 #navigation{-webkit-box-shadow: 0 010px#000;-moz-box-shadow: 0 010px#000;} #navigationli a:hover, #navigationli a:focus{-webkit-box-shadow: 0 05px#111;-moz-box-shadow: 0 05px#111;} 1 2 3 4 5 ##p {-moz-box-shadow :4px4px0#f00;-webkit-box-shadow :4px4px0#f00;box-shadow :4px4px0#f00; } Browser support: box-shadow is currently only supported by Webkit core browsers, but the upcoming Firefox 3.5 will also provide good support. Further reading: The 'box-shadow' property — W3C Working Draft Box-shadow, one of CSS3's bestnewfeatures — CSS3.info Apple's Navigation bar using only CSS Box Shadow — Surfin' Safari blog 11. Box size According to the CSS 2.1 specification, when calculating the total size of the box, the border of the element and padding should be added to the width and height. But older browsers are known to have their own very "creative" ways of interpreting this specification. The box-sizing attribute allows you to specify how the browser calculates the width and height of an element. WordPress uses the border-box attribute on all input box elements in the control panel. WordPressThe background area uses this attribute on all itsinput tagsand textarea tags of type text: The third attribute (-ms-box-sizing) is only valid under Internet Explorer 8. Through other selectors, the WordPress stylesheet also adds the Konqueror attribute: -khtml-box-sizing. The box-sizing property can have one of two values: border-box and content-box. Content-box renders width as defined in CSS 2.1. Border-box subtracts padding and borders from the set width and height (as in older browsers.) Browser support: box-sizing is supported by IE8, Opera, Gecko core and Webkit core browsers. Extended reading: 'box-sizing' property: W3C CandidateRecommendation ##Box-sizing, box-modelfixes for the simple people: CSS3.info CSS3 box-sizing attribute 12. Media queries viewable areais less than 480 pixels, you may want the sidebar of the website to be displayed below the main content, so that it should not float and display to the right: Media queries allow you to define different styles for different devices based on their capabilities. For example, when the 1 2 3 4 5 6 7 input [type="text"],textarea {-moz-box-sizing :border-box;-webkit-box-sizing :border-box;-ms-box-sizing :border-box;box-sizing :border-box; } ##1 You can also specify the device that uses the color filter: 2 3 4 5 6 7 8 9 10 11 sidebar{ float:right##;display :inline;/* IE Double-Margin Bugfix */ } ##@media alland (max-width:480px) { #sidebar{float :none##;clear :both;}} ##1 2 3 4 5 6 7 8 9 a { color : gray;} ##@media screen and (color) { a{ color: red; The potential is unlimited. This attribute is useful because you no longer have to write separate stylesheets for different devices, and you don't need to useJSto determine the properties and capabilities of each user's browser. One of the more popular JavaScript-based solutions for implementing a flexible layout is to useSmart Fluid Layout, making the layout more flexible to the user's browser resolution. Browser support: Media queries are supported by webkit core-based browsers and Opera. Firefox will support it in version 3.5. IE does not currently support these properties and there are no plans to support them in future versions. Further reading: Media Inquiries: W3C Candidate Recommendations Extended to CSS 3 media queries ##Media queries: CSS3.info The bleeding edge of web: media queries Secure Media Queries Media Type 13. Speech CSS3’s Speech module CSS3 allows you to specify speech styles for screen readers. You can control different settings for the voice, such as: voice-volume Use a number from 0 to 100 (0 is silent), a percentage or a keyword (silent,x- soft, soft, medium, loud and x-loud, etc.) to set the volume. voice-balance Control which channel the sound comes from (if the user's speaker system supports stereo). Speak Instructs the screen reader to read related text, numbers, or punctuation. Available keywords are none, normal, spell-out, di gits, literal-punctuation, no-punctuation and inherit. Pauses and rests Set a pause or stop before or after an element is read. You can use time units (for example, "2s" for 2 seconds) or keywords (none, x-weak, weak, medium, strong and x-strong). Cues Use sounds to limit specific elements and Controllerthe volume. voice-family Set specific voice types and voice synthesis (just like font-family). voice-rate Control the speed of reading. Can be set as a percentage or keywords: x-slow, slow, medium, fast and x-fast. voice-stress indicates any stress that should be used , use different keywords: none, moderate, strong and reduced. For example, tell the screen reader to use a male voice to read all h2 tags, use the left speaker, and use a soft tone According to the specified sound, the pattern can be specified as follows: ##1 { 2 3 4 5 6 ##h2 voice-family :female;voice-balance: left;voice-volume :soft;cue-after :url(sound. au##);} ## Unfortunately, this property has very little support right now, but it's clearly worth paying attention to as we can improve the usability of our sites in the future. Browser support:Currently, only the Opera browser (Windows XP and 2000) supports some properties of the voice module. To use them, use the -xv- prefix, for example -xv-voice-balance: right. Extended reading: CSS3 Speech Module - W3C Working Draft CSS3 Speech — CSS3.info Auditory CSS: Supports CSS 2 Auditory Stylesheet/CSS 3 Speech Module End CSS3 properties can greatly improve your workflow, making some of the most time-consuming CSS tasks cost-effective It takes a little effort and allows for better, cleaner and lighter code tags. Some properties are not yet widely supported by even the latest browsers, but that doesn't mean we can't experiment with them or provide more advanced features and CSS styling for users using advanced browsers. At this point, please remember thatnurturing our usersis also useful and necessary: the website does not need to look the same in every browser, and If a difference does not (negatively) affect the aesthetics and usability of the website, it should be considered. If we continue to waste tons of time and money trying to make every detailabsolutely consistent(instead of adopting a more flexible and future-oriented approach), users will not have any need/incentive to upgrade their browsers, So we have to wait a long time before old browsers become antique browsers and powerful modern browsers become standard The sooner we experiment and use new CSS3 properties, the sooner they will be The earlier popular browsers support them, the earlier we can use them widely. Recommended reading and resources: CSS3Previews: CSS3.info ##CSS 3: Exciting Function and Features: 30 Useful Tutorials 5 CSS3 Techniques For Major Browsers using the Power ofjQuery ##Introduction to CSS3 – Part 1: What is it? ##Comparison of layout engines (Cascading Style Sheets) and Wikipedia Progressive enhancement ##Five CSS design browser differences I can live with ##Progressive Enhancement with CSS CSS support in Opera 9.5 About the original author Inayaili de León is a Portuguese web designer. She is really interested in web design and front-end coding, and loves beautiful and clean websites. She lives in London. You can see more of her articles onWeb Designer Notebook, and follow her onTwitter.【Related recommendations】 1.CSS3 free video tutorial 2.Explain what is CSS3? 3. Detailed explanation of examples of selectors in CSS3 4. Detailed explanation of examples of content attributes in CSS3 5. Detailed explanation of the 10 top-level commands in CSS3

The above is the detailed content of Briefly describe how web designers can use CSS3 technology well. For more information, please follow other related articles on the PHP Chinese website!