Briefly describe how web designers can use CSS3 technology well-CSS Tutorial-php.cn

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 on JavaScript to write styles? Why can't we take advantage of the rich CSS3 features and tools available in modern browsers and 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 of CSS3 (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 use Manufacturer-specific extensions along 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 by W3C, 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, and other tags 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 website does not need to look strictly consistent across all browsers. Sometimes it is possible to use private properties in a browser to achieve specific effects.

The most common private properties are 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 selectors are incredibly powerful tools: they allow us to specify specific ## in a tag #HTML elements without having to use redundant class, 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 containing attributes that begin with a specific value
[att$="value"]
Matches elements containing attributes that end with a specific value
[att*="value"]
Matches elements containing an attribute with a specific value

An element containing an attribute with a specific value

Briefly describe how web designers can use CSS3 technology well

tweetCC Use 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:

2
3
4
5
6
7
8
9

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

##p~img

border
: 1px solid #ccc;}

Browser support:

All major browsers support this universal sibling selector except our favorite IE6
! 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)

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...个元素*/
```
Copy after login
:nth-last-child(n)
```
p p:nth-last-child(-n+2)
```
Copy after login
:last-child
: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 (

) to 0:

Briefly describe how web designers can use CSS3 technology well

##1

23 .

#primary

text p: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 will widely 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 and Chrome 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
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

Briefly describe how web designers can use CSS3 technology well On this website,
Tim Van Damme

On the mouse hover effect RGBa is used; for example, on the network link on his homepage:

##12 3#networksWhen 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:

##123 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 Color Module Level 3: W3C Working Draft
RGBA colors: CSS3.info
##RGBA color space
Is CSS3 RGBa ready to rock?
##Super-Awesome Buttons with CSS3 and RGBA

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.

Briefly describe how web designers can use CSS3 technology well 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 not floating; instead, the designer uses the following CSS3 multi-column layout:

##12##.indexWe 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:

4
5
6

#content p { -webkit-column-count :
4; -webkit-column-gap :
20px; -moz-column-count :
4; -moz-column-gap :
20px; }

123 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-originand background-clip etc. 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:

##1p

The first image will be the one "closest" to the user.

A more complex version of this property could look like this:

3
4
5

{

background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y; }

1
2
3
4
5

p {
background: url(example.jpg ) top left (100 % 2em) no-repeat,
url(example2.jpg) bottom left (##100% 2em) no-repeat,
url( example3.jpg) center center (10em 10em) 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

word-wrap

attribute is used to prevent it from being too long The string overflowed. 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 in tables; 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

6. Text-shadow

Although it already exists in CSS2,

text-shadow

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 .

BeakApp .com

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:

2 3	#.widefat * { word-wrap: break-word ; }

##12##.signup_areaHere we use the shadow color (using RGBA, described earlier), then the right (x coordinate) and bottom (y coordinate) offset, and finally Blur radiusIf 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) 0 1px 0;}

##1234

p
{

text-shadow
: red 4px 4px 2px, yellow
-4px -4px 2px, green
-4px 4px 2px; }

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.

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 launched JetPack MozillaLabs

12To 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

and italic). 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 can reference the font using the ordinary font-family attribute:

123

#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 as sIFR or Cufó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 using Cufón and Museo Sans. very beautiful!

Browser support: @font-face is supported by Safari 3.1+ and chrome. Internet Explorer supports fonts. 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 Brown uses 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:

##1h2 span

We can go one step further and add original CSS3 properties and Konqueror property extensions, as follows:

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:

##p

Browser support: border-radius is only supported by all versions of IE browser and 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

9. Border Image

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:

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; }

3
4
5
6

#content .post img {
border: 6px solid #f2e6d1; -webkit-border-image:
url( main-border.png##) 6 repeat ; -moz-border-image:
url(main -border.png) 6 repeat; border-image :
url(main-border.png## ) 6 repeat; }

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

{
border-width: 18px 25px 25px 18px; -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

4

##p

{

(...)
border-image:
url(example.png ) 18 25 25 18 stretch repeat; }

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 and border-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.

Briefly describe how web designers can use CSS3 technology well
10to1 uses the box-shadow attribute.# for its navigationBeijing and hoverstatus ##10to1 Add 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:

3
4
5
6
7
8
9

#navigation { -webkit-box-shadow:
0 0 10px #000; -moz-box-shadow:
0 0 10px #000; }

#navigation li a:hover,
#navigation li a:focus { -webkit-box-shadow:
0 0 5px #111; -moz-box-shadow:
0 0 5px #111; }

1
2
3
4
5

##p

{ -moz-box-shadow
: 4px 4px 0 #f00; -webkit-box-shadow
: 4px 4px 0 #f00; box-shadow
: 4px 4px 0 #f00;
}

Browser support: box-shadow is currently only supported by Webkit core browsers, but the upcoming Firefox 3.5 will also provide good support.

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.

WordPress The background area uses this attribute on all its input tags and 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 Candidate Recommendation
##Box-sizing, box-model fixes for the simple people: CSS3.info
CSS3 box-sizing attribute

12. Media queries

Media queries allow you to define different styles for different devices based on their capabilities. For example, when the

viewable area is 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:

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;
}

##1You can also specify the device that uses the color filter:

3
4
5
6
7
8
9
10
11

sidebar {
float: right##; display
: inline; /* IE Double-Margin Bugfix */
}
##@media
all and (max-width:480px) {
#sidebar { float
: none##; clear
: both; } }

##1

2345

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 use JS to 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 use Smart 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.

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
Controller the 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{

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 that nurturing our users is 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 detail absolutely 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.

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 on Web Designer Notebook, and follow her on Twitter.【Related recommendations】

1. CSS3 free video tutorial

2. Explain what is CSS3?

Detailed explanation of examples of selectors in CSS3

Detailed explanation of examples of content attributes in CSS3

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!