The future of CSS: little-known CSS 2.1 and CSS3 properties

Article Introduction: The greatest wealth is hidden beneath the WebKit, and it is very useful to begin to understand them in the era of iphone, ipad and Android apps. Even the Gecko engine, such as Firefox, also offers some unique properties. In this article, we'll look at the little-known CSS 2.1 and CSS3 properties and their support in modern browsers.

: <font color="#2c6288">The Future of CSS: Some of the experimental CSS properties


from: the Future of css:experimental CSS Properties


Please respect the copyright, reproduced please indicate the source, thank you!

Although modern browsers have supported many CSS3 properties, most designers and developers seem to be focusing on some "mainstream" attributes, such as Border-radius, Box-shadow, or transform. They have good documentation, good testing, and are most commonly used, so it's hard to get rid of them if you're designing a site recently.

However, hidden in the browser's big treasure House is some of the advanced, severely underestimated attributes, but they do not get too much attention. Perhaps some of them should be this way (ignored), but other attributes deserve more recognition. The greatest wealth is hidden beneath the WebKit, and it is very useful to begin to understand them in the era of iphone, ipad and Android apps. Even the Gecko engine, such as Firefox, also offers some unique properties. In this article, we'll look at the little-known CSS 2.1 and CSS3 properties and their support in modern browsers.

Description: For each attribute, we specify that "WebKit" refers to browsers using the WebKit kernel (Safari, Chrome, IPhone, IPad, Android, etc.), "Gecko "refers to the use of Gecko Kernel browser (Firefox, etc.). Then some of the attributes are official CSS 2.1. part of the specification, which means more browsers and even some older browsers will support them. Finally, a CSS3 tag indicates adherence to this standard and is supported by the latest browser versions-such as Firefox 4, Chrome 10, Safari 5, Opera 11.10, and IE9.

WebKit-specific properties

-webkit-mask

This attribute is quite powerful, so the detailed introduction is beyond the scope of this article, and it is well worth studying because it can save you a lot of time in practical applications.

-webkit-mask makes it possible to add a mask to an element so that you can create a pattern of any shape. The mask can be either a CSS3 gradient or a translucent png picture. The following element is overwritten when the alpha value of the mask element is 0, and the following is fully displayed when 1. The associated attributes are-webkit-mask-clip,-webkit-mask-position, and-webkit-mask-repeat, and are heavily dependent on syntax from the background. For more information, check out the WebKit blog and the links below.

Example

Picture mask:

. element{ background: URL (img/image.jpg) repeat; -webkit-mask: url (img/mask.png); }

Example

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

-webkit-text-stroke

One disadvantage of a CSS border is that only the elements of a rectangle can be used. -webkit-text-stroke can add borders to text. Not only can you set the width of a text border, but it can also set its color. And, with the use of color:transparent properties, you can also create hollow fonts!

Example

Set a 2px-wide blue border for all

1	H1 {-webkit-text-stroke: 2px Blue}

Another feature is that you can make text smooth by setting a transparent border of 1px:

1	H2 {-webkit-text-stroke: 1px Transparent}

To create a red hollowing font:

h3 { color: transparent; -webkit-text-stroke: 4px Red;

extended reading : Safari Developer Library

-webkit-nbsp-mode

Changing lines is sometimes tricky: sometimes you want text to break in the right place (instead of a line), and sometimes you don't want to. One property that controls this is-webkit-nbsp-mode, which allows you to change the behavior of whitespace characters, forcing text to break through where it is used. This can be achieved by setting the value to space.

extended reading : Safari Developer Library

-webkit-tap-highlight-color

This attribute is only available for iOS (iphone and ipad). When you click on a link or a clickable element defined through JavaScript, it appears with a translucent gray background. To reset this performance, you can set the-webkit-tap-highlight-color to any color.

To disable this highlight, set the color's alpha value to 0.

Example

Set a high bright color of 50% transparent red:

1	-webkit-tap-highlight-color:rgba (255,0,0,0.5);

Browser support : only iOS (iphone and ipad).

extended reading : Safari Developer Library

Zoom:reset

Generally speaking, zoom is an IE-specific attribute. But WebKit is also starting to support it, and using value Reset,webkit can achieve good results (interestingly, IE does not support this value). It lets you reset the normal indent in the browser to--if an element is declared Zoom:reset, the other elements on the page will zoom in when the user magnifies the page.

Note: In fact, we often use to disable the Chrome force font size when used in the-webkit-text-size-adjust:none, but also to achieve a similar effect, the difference is that the set of the attributes of the elements within the text will not be magnified/reduced, But the other elements on the page will change--God fly

extended reading : Safari Developer Library

-webkit-margin-collapse

This attribute is a restricted class, but it is still very interesting. Typically, the margin of two adjacent elements is folded (collapse). This means that the margin at the bottom of the first element and the head margin of the second element are merged together.

The most common example is the two adjacent <p> elements that share their margin values. To control this performance, we can use-webkit-margin-collapse and its split-webkit-margin-top-collapse,-webkit-margin-bottom-collapse, and so on. The default value is collapse, and the value separate stops sharing the margin value, meaning that the bottom margin of the first element and the head margin of the second element are stacked normally.

extended reading : Safari Developer Library

-webkit-box-reflect

Do you remember the time when almost every website made a reflection of their website logo or head text? Thankfully, that era is over, but if you want to use this technology better on some buttons, navigation, or other UI elements,-webkit-box-reflect is a better choice.

This property accepts above, below, left, and right four keywords that set the direction of the reflection, and they are used with a number that sets the element and the distance it is built. At the same time, the mask picture is also supported (look at the-webkit-mask section above, do not confuse the ha). The reflection is automatically generated and has no effect on the layout. The following element uses only CSS, and the second button uses the-webkit-box-reflect property.

Example

The reflection appears below its parent element and has a spacing of 5px:

1	-webkit-box-reflect: below 5px;

The reflection will be projected to the right of the element, without spacing. Then, a mask will be applied (URL (mask.png)):

1	-webkit-box-reflect: right 0 url (mask.png);

extended reading : Safari Developer Library

-webkit-marquee

Another attribute lets us go back to the good old days: the time of the marquee (the Valley lights). The interesting thing is that the already-abandoned label has become very useful now, for example, if we switch content on a smaller screen, the text will not be fully displayed.

The application of this weather created by OZPDA is well used. (If you see a change in the text, you can try a different city to experience.) Need to use 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; }

To make marquee work requires some preconditions. First, the white-space must be set to nowrap, so that the text does not automatically wrap, and secondly, overflow must be set to-webkit-marquee, and the width should be set to a value smaller than the actual length of the text.

The remaining properties ensure that the text scrolls from the left to the right (-webkit-marquee-direction), moves back and forth (-webkit-marquee-style), and moves at a lower speed (-webkit-marquee-speed). Other attributes have-webkit-marquee-repetition that define the number of marquee repetitions,-webkit-marquee-increment, and define the rate changes each increment.

Note: Although the HTML marquee tag is discarded in XHTML, the browsers still support it, but one problem is that the marquee tag may occupy a larger CPU, and the big cat has studied it The conclusion is that the speed of marquee can not be too fast, and WebKit with-webkit-marquee attribute is the best-god fly.

extended reading : Safari Developer Library

Gecko-specific properties

Font-size-adjust

This 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 be relative to the height of the lowercase letter (x-height) rather than the height of the uppercase letter (cap height). For example, Verdana is clearer than the same type of times font, it has a shorter x-height. To compensate for this flaw, we can use the Font-size-adjust property to correct the latter.

This property is useful for fonts that have different x-height. Even if you are careful with small fonts, font-size-adjust can provide solutions when problems arise.

Example

If, for some reason, the user does not have Verdana installed on their computer, Arial will be modified to have the same aspect ratio (0.58) as the 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-rendering

N years ago, pictures were not displayed in their original size, but were scaled by designers. Depending on the size and context of the zoom, the picture may not be well displayed in the browser or simply wrong. Now, the browser has a better algorithm to display the scaled picture, but it is also a great thing to control the performance of your picture when it is scaled.

This gecko private property is especially useful if your picture has sharp lines and wants them to keep it after zooming. The associated value is-moz-crisp-edges. The same algorithm is used for optimizespeed, while auto and optimizequality are defined as standard behaviors (scaling elements with the best possible quality). The Image-rendering property can also be used for <video> and <canvas> elements, as well as for background pictures. This is a CSS3 standard attribute, but currently only Firefox support.

It is noteworthy that-ms-interpolation-mode:bicubic, although it is an IE proprietary attribute. However, it lets internet Explorer 7 render the picture as a relatively high quality after zooming it. This property may be useful because the browser defaults to handling it very poorly.

browser support : Gecko.

extended reading : Mozilla Developer Network

-moz-border-top-colors

This attribute can be categorized as ' eye-pleasing '. It allows you to set a different border color for border when the width is greater than 1px. Of course-moz-border-bottom-colors,-moz-border-left-colors and-moz-border-right-colors are also available.

The bad feeling is that there is no abbreviated-moz-border-colors abbreviation, so each border has to be set separately. At the same time, border-width to the number of colors to be consistent, otherwise, the final color value will be filled to the remaining width.

Example

In this example, the left and right border of the element will be the standard orange, and then there is a similar gradient of color-red, yellow and blue three colors.

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 properties

-webkit-user-select and-moz-user-select

Perhaps you often don't want users to choose text on your site, whether it's for copyright reasons or not. Usually you will have JS to implement, and another solution is to set the value of-webkit-user-select and-moz-user-select to none.

Use this property with caution: Because most users are looking for information that they can copy and store for future use, this method is both useless and ineffective. If you disable the copy and Paste feature, users can still view the source files to get what they want. I don't understand why this attribute is supported by WebKit and Gecko.

browser support : WebKit, Gecko.

extended reading : Safari Developer Library, Mozilla Developer network

-webkit-appearance and-moz-appearance

Have you ever wanted to disguise a picture as a radio button? Or, does an input box look like a check box? So now the appearance appears. Even if you don't want a link to look like a button, the following example also lets you know that you can do it if you want to:

Example

a { -webkit-appearance:button; -moz-appearance:button; }

browser support : WebKit, Gecko.

extended reading : Safari Developer Library, Mozilla Developer network, Mozilla Developer Network ,CSS3 appearance Introduction

Text-align:-moz-center/-webkit-center

This is the existence of an attribute (or, to be precise, a "property value") that is surprisingly good. For a block-level element to be centered, it is usually set to margin:0 auto. However, now you can also set the Text-align property of the container for the element to-moz-center and-webkit-center. Alternatively, you can set the element to the left or right by setting-moz-left,-webkit-left or-moz-right,-webkit-right.

browser support : WebKit, Gecko.

extended reading : Safari Developer Library

CSS 2.1 Properties

Counter-increment

Do you often wish you could have an ordered list or all headings of an article automatically numbered? Unfortunately, there is currently no CSS3 attribute support. 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.

With: Before pseudo elements and content attributes, Counter-increment can add an automatic number to all HTML tags. Even nested encodings are supported.

Example

To encode the title, first reset the calculator:

1	Body {Counter-reset:thecounter}

The following style lets each

. Counter H1:before { Counter-increment:thecounter 1; Content: "section" Counter (thecounter) ":"; }

Example

For a list of nested encodings, redesign the number, and then 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 automatic numbering, and the separator is a dot (.) followed by a space

Li:before { counter-increment:section; Content:counters (section, ".") ""; }

HTML code:

</ol> </li> <li>item</li> <!--3--> <ol>

browser support : CSS 2.1, all modern browsers, IE 7+.

extended reading : counter-increment,CSS content, Counter-reset and detailed

Quotes

Do you struggle because your CMS doesn't know how to translate the reference symbols correctly? Then start using the quotes attribute. So you can customize any of the symbols. Then you can use: Before and: After pseudo elements to specify quotes for any expected elements, and sadly, WebKit browsers do not support this attribute--after testing, Chrome 11 has started to support this property (previous version has not been tested).

Example

The preceding two symbols determine the quotation marks for the first level of reference, followed by the two-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, the <p><q>this is a very <q>nice</q> quote.</q></p> will appear to be purple:
«this is a very‹nice›quote.»

browser support : CSS 2.1, except for Webkit,ie 7 and IE6 all modern browsers. But Chrome is a support ...

extended reading : the consortium

question: to add a symbol directly, does the CSS document have to be set to UTF-8? This is a very tangled problem. Unfortunately, I cannot give a definitive answer. My experience is that you don't have to set any particular character set, and then the utf-8 character set can go wrong because it shows the wrong characters (such as "»"). Instead of using the iso-8859-1 character set, everything is normal.

" because the quotes defined by ' quotes ' in the last example are conveniently positioned on a computer keyboard, high quality characters require a different 10646 character set," the consortium said. ”

You've probably heard of it, but you didn't remember it. CSS3 Properties

Towards the end, let's revisit some of the less popular CSS3 attributes that are not as widely needed as Border-radius and Box-shadow.

Text-overflow

Perhaps you will often encounter this problem: a container is too small for the text, and then you have to use JavaScript to truncate the string and add "..." symbols to avoid text overflow.

Forget it! Using CSS3 and Text-overflow:ellipsis, if the text is longer than the width of its container, you can force text to end it with "...". The only requirement is to set the Overflow:hidden. Unfortunately, Firefox does not support this attribute, but it looks like it will be supported in the most recent version.

Example

div { width: 100px; text-overflow:ellipsis; }

browser support : CSS 3, the latest version of all browsers, in addition to Firefox,ie from IE6 support, it is said that Firefox to 6.0 will also provide support-I hope so.

extended reading : the consortium

Word-wrap

When text is in a narrower container, some part of it may be too long to wrap correctly. Links, for example, often cause problems. If you don't want to use Overflow:hidden to hide overflow text, you can set Word-wrap to Break-word, which allows the string to wrap when it reaches the width limit of the container.

Example

div { width: 50px; Word-wrap:break-word; }

browser support : CSS 3, all modern browsers.

extended reading : the consortium

Resize

If you're using Firefox or Chrome, you'll notice that the lower-right corner of the text box has a small handle, which allows you to resize it. The behavior of this standard is implemented by the CSS3 attribute Resize:both.

But it is not limited to textarea. It can be used with all HTML elements. The horizontal and vertical values are used to control whether the horizontal or vertical orientation is adjusted.

Note: For the Display:block element, setting the Overflow:visible,resize property will not work (this is an unknown source of the original description--by).

browser support : CSS3, except opera and IE's other newest browsers.

extended reading : Safari Developer Library

Background-attachment

When you specify a background image for a overflow:auto element, when there is too much content and the scroll bar appears, dragging the scroll bar reveals that the position of the background picture is fixed rather than moving along with the scroll bar. If you want the background image to scroll along with the content, you can set the background-attachment:local.

browser support : CSS 3, in addition to Firefox, all modern browsers, Firefox is supported background-attachment properties, but does not support local values .

extended reading : the consortium

Text-rendering

As more and more websites begin to use @font-face to render text, legibility is beginning to be noticed. Small font, text will appear more easily. Since there is no CSS property control to display the subtle details of online fonts, you can use text-rendering to enable kerning and ligatures.

Gecko and WebKit browsers handle this property in a very different way. This feature is enabled by default, and you need to set it to optimizelegibility.

browser support : CSS3, all WebKit and Firefox browsers.

extended reading : the consortium

Transform:rotatex/transform:rotatey

If you have already started using CSS3, then you might be familiar with transform:rotate (), which rotates the attributes of an element on the z-axis.

But do you also know that it can also be rotated more deeply (for example, around the x-axis and the y-axis)? These deformations combined with-webkit-backface-visibility:hidden would be more appropriate.

Example

If you pass the mouse over this element, it will rotate 180 ° and reverse:

1 2 3

Div:hover { Transform:rotatey (180deg); }

Tip: If you just map an element, you can set transform to Rotatex (180deg) (corresponding to Rotatey) or set transform to ScaleX (-1) (corresponding to ScaleY).

browser support : CSS3, WebKit, Firefox, Opera, and IE9

extended reading : The CSS3 animation technology that you need to know

Conclusion

As you would like to see, there are a lot of unknown and useful properties. Many of them are still in the experimental phase and may even end up being discarded by browsers. And some of them 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, and the WebKit-specific attributes are becoming increasingly important with the success of iOS and Android. Of course, some CSS3 properties are more or less ready to use.

If you don't like private properties, you can see them as experiments until they can be implemented in code to enhance the user experience. At the same time, the CSS Validator of the consortium also supports private properties, and it returns warnings rather than errors.

I wish you a happy experience!

PS: This article mentioned a lot of features, but only an overview, in fact, basically each attribute can be deeply studied, if you are interested, welcome to in-depth research and sharing, thank you---god fly.

The original author of this article Christian Krammer is the most recent css3files.com webmaster.