Although modern browsers already support many css3 attributes, most designers and developers seem to be still concerned with some of the "mainstream" attributes, such as border-radius, box-shadow, or transform. They have good documentation, good tests, and are most commonly used, so if you are designing a website recently, it is hard to get rid of them.
However, some advanced and seriously underestimated properties are hidden in the big treasure of browsers, but they have not received much attention. Maybe some of them should be like this (ignored), but other attributes should be more recognized. The greatest wealth is hidden under WebKit, and in the age of iPhone, iPad, and Android apps, it is often useful to learn about them. Even the gecko engine used by Firefox provides some unique attributes. In this article, we will take a look at the little-known CSS 2.1 and css3 attributes and their support in modern browsers.
Description: For each attribute, we stipulate :"WebKit"WebKit kernel browsers (Safari, chrome, iPhone, iPad, Android, etc ),"Gecko"It refers to browsers using the gecko kernel (Firefox, etc ). Then some attributes are part of the official CSS 2.1. specification, which means that more browsers and even some ancient browsers will support them. Finally, a css3 label indicates that it complies with this standard and is supported by the latest browser versions, such as Firefox 4, chrome 10, Safari 5, opera 11.10, and ie9.
WebKit-MaskThis attribute is quite powerful, so the detailed introduction is beyond the scope of this article. It is worth further research, because it can save you a lot of time in practical application. -WebKit-mask makes it possible to add masks to an element, so that you can create patterns of any shape. The mask can be a css3 gradient or translucent PNG image. When the Alpha value of the masked element is 0, the following elements are overwritten. When the Alpha value is 1, the following content is fully displayed. Related attributes include-WebKit-mask-clip,-WebKit-mask-position, and-WebKit-mask-repeat, which are heavily dependent on the syntax in the background. For more information, see [WebKit blog] [6] and the following link. ! [The Future of CSS: some experimental CSS attributes] [7] examples:
.element{background: url(img/image.jpg) repeat;-webkit-mask: url(img/mask.png);}
Sample gradient mask:
.element2 {background: url(img/image.jpg) repeat;-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
Extended reading: [safari Developer Library] [8]
One disadvantage of CSS borders is that only rectangular elements can be used. -WebKit-text-stroke can be used to add borders for text. It not only sets the width of the text border, but also sets its color. In addition, you can use the color: transparent attribute to create a hollow font! In this example, a 2px blue border is set for all
h1 {-webkit-text-stroke: 2px blue}
Another feature is to smooth the text by setting a 1 px transparent border:
h2 {-webkit-text-stroke: 1px transparent}
Create a red blank Font:
h3 {color: transparent;-webkit-text-stroke: 4px red;}
! [Future of CSS: some experimental CSS attributes] [9] extended reading: [safari Developer Library] [10]
Line feed is sometimes tricky: Sometimes you want the text to be broken (rather than broken) where appropriate, and sometimes you don't want. A property that can control this is-WebKit-nbsp-mode, which allows you to change the blank character behavior and force the text to break lines where it is used. Set the value to space. Extended reading: [safari Developer Library] [11]
-WebKit-tap-Highlight-colorThis attribute is only used for iOS (iPhone and iPad ). When you click a link or click an element defined by JavaScript, a translucent gray background appears. To reset the performance, you can set-WebKit-tap-Highlight-color to any color. To disable this highlight, set the Alpha value of the color to 0. In the example, the highlighted color is 50% transparent Red:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
Browser support: Only IOs (iPhone and iPad). For more information, see [safari Developer Library] [12].
Zoom: resetGenerally, Zoom is an attribute dedicated to IE. But WebKit also began to support it, and the value reset can be used to achieve good results (interestingly, ie does not support this value ). It allows you to reset the normal scaling behavior in the browser-if an element is declared ZOOM: reset, other elements on the page will be zoomed in when the user zooms in the page. Note: In fact, we often use-WebKit-text-size-adjust: none when disabling Chrome's forced font size. The difference is that, the text in the element that sets this attribute will not be zoomed in or out, but other elements on the page will change. For details, refer to [safari Developer Library] [13].
This attribute is restricted, but it is worth noting. Generally, the margin of two adjacent elements is folded (collapse ). This means that the margins at the bottom of the first element and the header margins of the second element will be merged together. The most common example is two adjacent
Elements share their margin values. To control this performance, we can use attributes such as-WebKit-margin-collapse and its split-WebKit-margin-top-collapse and-WebKit-margin-bottom-collapse. The default value is collapse, and the value separate stops sharing the margin value. That is, the bottom margin of the first element and the header margin of the second element are superimposed normally. ! [Future of CSS: some experimental CSS attributes] [14] extensions: [safari Developer Library] [15]
-WebKit-box-reflectDo you remember the time when almost every website made their Website Logo or header text into a reflection? Thank God that time has passed, but if you want to better use this technology on some buttons, navigation, or other UI elements,-WebKit-box-reflect is a better choice.
This attribute accepts the Four keywords "above", "below", "Left", and "right". They are used together with a number that sets the distance between the element and its reflection. At the same time, masked images are also supported (refer to the-WebKit-mask section above and don't confuse it ). The reflection is automatically generated and has no effect on the layout. The following elements only use CSS, and the second button uses the-WebKit-box-reflect attribute.
Example
This reflection will appear under its parent element with a 5px margin:
-webkit-box-reflect: below 5px;
This reflection will be projected to the right of the element with no spacing. Then a board will be applied (url(mask.png )):
-webkit-box-reflect: right 0 url(mask.png);
Additional reading: safari Developer Library
-WebKit-marqueeAnother attribute makes us back to the beautiful old age: marquee everywhere. Interestingly, this abandoned tag has become very useful now. For example, if we switch the content on a relatively small mobile phone screen, the text cannot be completely displayed if the line keeps going.
The weather application created by ozpda is well used. (If you can see the transformed text, you can try another city. Use the WebKit kernel browser)
Example
.marquee {white-space: nowrap;overflow:-webkit-marquee;width: 70px;-webkit-marquee-direction: forwards;-webkit-marquee-speed: slow;-webkit-marquee-style: alternate;}
Some prerequisites are required for Marquee's work. First, the white-space must be set to nowrap so that the text does not wrap automatically. Second, overflow must be set to-WebKit-Marquee, the width must also be set to a value smaller than the actual length of the text.
The remaining attributes ensure that the text is scrolled from the left to the right (-WebKit-marquee-direction) and moved back and forth (-WebKit-marquee-style) and move at a relatively low speed (-WebKit-marquee-speed ). Other attributes include-WebKit-marquee-repetition, which defines the number of Marquee repetitions,-WebKit-marquee-increment, and defines the speed change of each increment.
Note: Although HTML marquee labels are discarded in XHTML, they are supported by various browsers, but one problem is that the marquee tag may occupy a large CPU, the big cat has made an in-depth research on it. The conclusion is that the speed of Marquee cannot be too fast, and the WebKit uses the-WebKit-Marquee attribute as the best-shenfei.
Additional reading: safari Developer Library
Gecko special attribute font-size-adjustThis useful css3 attribute is currently only supported by Firefox. We can use it to set the text size (font-size) of the specified element to the height (X-height) of lower case letters rather than the height (Cap height) of upper case letters ). For example, verdana is clearer than the Times font of the same model, and has a shorter X-height. To make up for this defect, we can use the font-size-adjust attribute to correct the latter.
This attribute is useful in fonts with different X-height values. Even if you are using a small font with caution, font-size-Adjust can provide a solution when a problem occurs.
Example
If verdana is not installed on the user's computer for some reason, Arial will be corrected to have the same aspect ratio (0.58) as verdana ).
p {font-family:Verdana, Arial, sans-serif;font-size: 12px;font-size-adjust: 0.58;}
Browser support: gecko.
Extended reading: Mozilla Developer Network
Image-renderingN years ago, images were not displayed in their original size, but scaled by designers. Depending on the size and context of the scaling, the image may not be displayed well in the browser or it is simply wrong. Now, the browser has a better algorithm to display scaled images. However, it is awesome to fully control your image after it is scaled.
This Gecko private attribute is especially useful if your image has sharp lines and you want them to keep it after scaling. The related value is-moz-crisp-edges. The same algorithm is also used in optimizespeed, while auto and optimizequality are defined as standard behavior (scaling elements with the best possible quality ). The image-rendering attribute can also be used for <video> and <canvas> elements, just like for background images. This is a standard css3 attribute, but it is currently only supported by Firefox.
It is worth noting that-MS-interpolation-mode: bicubic, although it is an IE proprietary attribute. However, it enables Internet Explorer 7 to render the image to a higher quality after scaling. This attribute may be useful because the browser is poorly processed by default.
Browser support: gecko.
Extended reading: Mozilla Developer Network
-Moz-border-top-colorsThis attribute can be classified as "eye-catching '. It allows you to set different border colors when the Border width is greater than 1 px. Of course,-moz-border-bottom-colors,-moz-border-left-colors and-moz-border-right-colors are also available.
Unfortunately, there is no abbreviated-moz-border-colors, so each border must be set separately. At the same time, border-width must be consistent with the number of colors given. Otherwise, the last color value will be filled with the remaining width.
Example
In this example, the border between the left and right sides of the element will be standard orange, and there is a gradient-like color-red, yellow, and blue.
div {border: 3px solid orange;-moz-border-top-colors: red yellow blue;-moz-border-bottom-colors: red yellow blue;}
Browser support: gecko.
Extended reading: Mozilla Developer Network
Mixed attributes-WebKit-user-select and-moz-user-selectMaybe you often don't want users to select text on your website, whether it's for copyright reasons or not. Generally, JS is used for implementation. Another solution is to set the values of-WebKit-user-select and-moz-user-select to none. Exercise caution when using this attribute: because most users view information, they can copy and store it for future use, so this method is useless and ineffective. If you disable the copy and paste function, you can still view the source file to obtain the content they want. Why is this attribute supported by WebKit and gecko. Browser support: WebKit, gecko. Extended reading: safari Developer Library, [Mozilla Developer Network] [25]-WebKit-appearance and-moz-appearance
Have you ever thought of disguising an image as a single-choice button? Or does an input box look like a check box? Now appearance appears. Even if you do not want to make a link always look like a button, the following example can help you understand what you can do as long as you want: Example
a {-webkit-appearance: button;-moz-appearance: button;}
Browser support: WebKit, gecko. Extended reading: [safari Developer Library] [26], [Mozilla Developer Network] [27], [css3 appearance overview] [28]Text-align:-moz-center/-WebKit-center
This is a property (or, precisely, a "property value") that is quite surprising. To center a block-level element, you usually set it to margin: 0 auto. However, you can also set the text-align attribute of the element container to-moz-center and-WebKit-center. You can also set-moz-left,-WebKit-left,-moz-right, and-WebKit-right to place the elements left or right.
Browser support: WebKit and gecko.
Additional reading: safari Developer Library
CSS 2.1 attribute counter-IncrementDo you often want to enable automatic numbering of all titles in an ordered list or an article? Unfortunately, no css3 attribute is currently supported. But in CSS 2.1, counter-increment provides a solution. This means that it has been around for years and has been supported in IE8.
In combination with the before pseudo element and content attributes, counter-increment can add automatic numbers for all HTML tags. Nested encoding is supported.
Example
To encode the title, reset the calculator:
body {counter-reset: thecounter}
The following style allows each
.counter h1:before {counter-increment: thecounter 1;content:"Section"counter(thecounter)":";}
Example
For a list of nested encodings, reset the counter and turn off the automatic encoding of <ol> because it is not nested:
ol {counter-reset: section;list-style-type: none;}
Then, each <li> is set to an automatic number. The Delimiter is a vertex (.) followed by a space.
li:before {counter-increment: section;content: counters(section,".")"";}
HTML code:
<ol> <li>item</li> <!-- 1 --> <li>item <!-- 2 --> <ol> <li>item</li> <!-- 1.1 --> <li>item</li> <!-- 1.2 --> </ol> </li> <li>item</li> <!-- 3 --><ol>
Browser support: CSS 2.1, all modern browsers, IE 7 +.
Extended reading: W3C, CSS content, counter-increment, and counter-Reset
QuotesAre you entangled because your CMs does not know how to correctly convert the referenced symbols? Use the quotes attribute. In this way, you can customize any symbols. Then you can use the: before and: After pseudo elements to specify the quotation marks for any expected element. Sadly, the WebKit browser does not support this attribute-tested, chrome 11 has started to support this attribute (not tested in earlier versions ).
Example
The first two symbols determine the quotation marks of the first-level reference content, the latter two are used for second-level reference, and so on:
q {quotes: '«' '»' "‹" "›";}
The following two lines are used to specify quotation marks for the selected element:
q:before {content: open-quote}q:after {content: close-quote}
In this way,
<Q> This is a very <q> nice </q> quote. </q>
It will look purple: «this is a very character nice › quote .»
Browser support: CSS 2.1. All modern browsers except WebKit, IE 7, and IE6 are supported. However, chrome supports...
Extended reading: W3C
Question: Do CSS documents have to be set to UTF-8 to directly add symbols? This is a very tangled problem. Unfortunately, I cannot give a clear answer. In my experience, there is no need to set specific character sets, and then the UTF-8 character set may encounter errors because it displays the wrong characters (such "»"). But with the iso-8859-1 Character Set, everything is normal.
W3C described as follows: "Because the quotation marks defined by 'quotes 'in the previous example are conveniently located on the computer keyboard, high-quality characters require different 10646 character sets ."
You may have heard of but not remembered the css3 attribute.Coming to an end, let's review some of the less popular css3 attributes that are not as widely used as border-radius and box-shadow.
Text-OverflowYou may often encounter this problem: a container is too small for the text in it, and you have to use JavaScript to truncate the string and add "..." Symbol to avoid text overflow.
Forget it! Use css3 and text-overflow: ellipsis. If the text is longer than the width of its container, you can force the text "..." End it. The only requirement is to set overflow: hidden. Unfortunately, Firefox does not support this attribute, but it seems that it will be supported in the latest version.
Example
div {width: 100px;text-overflow: ellipsis;}
Browser support: CSS 3, the latest version of all browsers, except Firefox, ie is supported from IE6. It is said that Firefox to 6.0 will also provide support-Hope so.
Extended reading: W3C
Word-wrapWhen a text is in a narrow container, a part of it may be too long to wrap correctly. For example, links often cause problems. If you do not want to use overflow: Den den to hide the overflow text, you can set word-wrap to break-word, which allows the string to wrap when the container Width limit is reached.
Example
div {width: 50px;word-wrap: break-word;}
Browser support: CSS 3, all modern browsers.
Extended reading: W3C
ResizeIf you are using Firefox or chrome, you must note that there is a small handle in the lower right corner of the text box by default, which allows you to adjust their size. This standard behavior is implemented by the CSS 3 attribute resize: Both.
However, it is not limited to textarea. It can be used for all HTML elements. The horizontal and vertical values are used to control the horizontal or vertical adjustment.
NOTE: For the display: block element, if overflow: visible is set, the resize attribute will be invalid.
Browser support: css3, except for the latest browsers that opera and IE think.
Additional reading: safari Developer Library
Background-AttachmentWhen you specify a background image for an element with overflow: auto, when there is too much content and a scroll bar appears, drag the scroll bar and you will find that the position of the background image is fixed, instead of moving with the scroll bar. If you want the background image to scroll with the content, you can set background-Attachment: local.
Browser support: CSS 3. All modern browsers except Firefox, Firefox supports the background-attachment attribute, but does not support the local value.
Extended reading: W3C
Text-renderingAs more and more websites begin to use @ font-face to render text, yi began to be concerned. On the small font, text is more likely to appear. Currently, there is no CSS attribute to control the subtle details of online fonts. You can use text-rendering to enable kerning and ligatures.
Gecko and WebKit browsers handle this attribute in different ways. The former enables this feature by default, while the latter requires you to set it to optimizelegibility.
Browser support: css3, all WebKit and Firefox browsers.
Extended reading: W3C
Transform: rotatex/transform: rotateyIf you have already started using css3, you may be familiar with transform: Rotate (), which is the property of rotating elements on the Z axis.
But do you know that it can also rotate more deeply (for example, around the X and Y axes )? The combination of these variants-WebKit-backface-visibility: hidden is more suitable.
Example
If you move the mouse over this element, it will rotate 180 ° and reverse:
div:hover {transform: rotateY(180deg);}
Tip: If you only map an element, you can set transform to rotatex (180deg) (corresponding to rotatey) or transform to scalex (-1) (corresponding to scaley ).
Browser support: css3, WebKit, Firefox, opera, and ie9
Extended reading: W3C, css3 animation technology you need to know
ConclusionAs you can see, there are still many unknown and useful attributes. Many of them are still in the experimental phase and may remain like this or even eventually be discarded by browsers. Some are expected to be supported by all browsers in later versions.
However, it is difficult to judge whether some of them are good or bad. The unique attributes of WebKit become more and more important with the success of iOS and Android. Of course, some css3 attributes are more or less usable.
If you do not like private attributes, You can regard them as labs until they can be implemented in code to enhance user experience. At the same time, W3C CSS validator also supports private attributes. It returns a warning rather than an error.
Wish you a happy experience!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
