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 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)

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.

• 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.

• <span class="css">[<span class="br0">att</span>^=<span class="sy0"></span><span class="st0">"value"<span style="color:#036a07"></span></span>]<span class="br0"></span></span>
  Matches elements containing attributes that begin with a specific value

• <span class="css">[<span class="br0">att$</span>=<span class="sy0"></span><span class="st0">"value"<span style="color:#036a07"></span></span>]<span class="br0"></span></span>
  Matches elements containing attributes that end with a specific value

• <span class="css">[<span class="br0">att</span>*=<span class="sy0"></span><span class="st0">"value"<span style="color:#036a07"></span></span>]<span class="br0"></span></span>
  Matches elements containing an attribute with a specific value

An element containing an attribute with a specific value

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:

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

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...个元素*/

  Copy after login
  :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)

  Copy after login

  
  

  :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(<span class="css">[<span class="sy0">class</span>*=<span class="br0"></span><span class="br0">"lead"</span><span class="sy0"></span>]<span class="st0"><span style="color:#036a07">)</span> </span>{<span class="br0"> </span><span class="br0">color</span><span class="br0"></span>:<span class="kw1"> <span style="color:#0000ff"></span>black</span><span class="sy0"></span>;<span class="kw1"> <span style="color:#0000ff">}</span></span><span class="sy0"></span><span class="br0"></span></span>.
  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

##1

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!