CSS3: Forever and ever!

Let's face it. Mozilla produces so many alfs, nightly builds , and releases for developers that if you still haven’t paid attention to the recently released version - Firefox 3.6 alpha - then you can fully understand.

Although, this time the grounds were very good to focus the attention of geeks . Since, among other positive innovations, the amendments include:

• property -moz-background-size
• multiple background images
• new unit of length rem
• CSS gradients
• improved display: table view

Now let's make an important point to clarify the situation - this is still an alpha release, which so far will use only the smallest percentage of the Firefox user base. Nevertheless, we have every chance to see these changes in the stable version of Firefox at the end of the year.

Multiple background images

Despite the hype, when Mozilla first introduced -moz-border-radius - allowing you to make rounded corners with a simple CSS property - I personally did not get excited about it.

On the contrary, I was always shocked by the opportunity that the concept of multiplicity of background images promised - performed by means of several simply grandiose tricks on the layout without any persistence in sophisticated layout.

The basic syntax is very simple. Instead of specifying only one image in the background-image property, you list up to four images separated by commas.

You can also specify up to four corresponding values ​​for background-repeat and background-position:

#multi {

      background-image: url (paper.png), url (paper2.jpg);  

      background-repeat: no-repeat, no-repeat;  

      background-position: top left, bottom right;  

}

I have to say that I discovered a somewhat unnatural sort order. The second image is listed below the first, and so on. But as soon as you feel and remember, there will be no problem.

Well, which browsers do support this property?

Currently, multiple background images are fully supported only by Safari 4.0, Chrome 3.0, and Firefox 3.6 alpha (Minefield). You can see my example in action if you go to one of these browsers at this URL:

http://www.sitepoint.com/examples/css3/multi.html

Well, is it worth it to use this property now?

One of the first problems that I encountered when checking the display of code in different browsers was that they refuse to take only the first image in the list, ignoring the rest. A comma is enough to kill the whole declaration in these browsers, leaving the background empty.

However, I found that if you first declare the background image to all standards, then Opera, older versions of Firefox and Safari simply easily ignore any newer CSS ads that may go further in the code.

The fact that Internet Explorer refuses to obey this rule is not a problem, since we are free to use comments with the condition to force simple, single-picture code to be executed in IE:

In general, I think that this property is practical and gives the result even today, although you need to be very careful to use it gracefully.

Be sure to make sure that your design works fine with old browsers (in the end, it won’t make you worse), but it will add an additional luxurious touch to your design in an ever-increasing mass of users of new browsers. So it's time for experimentation.

Setting the size of the background image

As you can guess from the title, background-size allows you to scale the image added using CSS to the background.



In fact, now the background-size property lacks support everywhere except its native CSS3 format, but Opera, Chrome / Safari, and Firefox 3.6 alpha support it, although each with its own markup.

The markup is as follows:

body {

      background-image: url (background_image.jpg);

      background-size: 50% 50%; / * w3c specification * /

            -moz-background-size: 50% 50%; / * firefox css * /

            -webkit-background-size: 50% 50%; / * safari / chrome * /

            -o-background-size: 50% 50%; / * opera css * /

}

If you use one of these browsers, you can see this code in action here .

So, can we use it right now?

Again, the short answer is yes. Anyway, such narrowly targeted declarations will simply be ignored by other browsers, so there are no technical barriers to using this property.

For me personally, it seems less clear where exactly I would like to apply this property, since few images are suitable for free scaling.

So, if you still risk creating a wonderful example of using this property, I would like to see your work.

CSS gradients

CSS background gradients - a property that seems to me the most viable of the innovations, even though at the moment it is only supported in Firefox alpha, Safari 4, and Chrome 3.

Like background-size property code, background code gradients also depend on the browser, although each command represents a new value for the background-image standard rather than creating a completely new CSS property.

Most simply, this property looks like this:

div # cssgradient2 {

  background-image: -moz-linear-gradient (top, bottom, from (# A1D004), to (# 6B9A00));

  background-image: -webkit-gradient (linear, left top, left bottom, color-stop (0.00, # A1D004), color-stop (1.00, # 6B9A00));

}

As you can see above, the code for Mozilla (Firefox) and WebKit (Safari / Chrome) are similar but not identical. Both require color-start and color-stop for your gradient, as well as direction coordinates (top, left, right, bottom, etc.).

Although both WebKit and Mozilla can display both radial and linear gradients, they go in different ways. If Mozilla prefers to use two different property values ​​(such as -moz-linear-gradient () and -moz-radial-gradient ()), then WebKit uses a single value, but with a special parameter (for example, -webkit-gradient (radial , ...))

To make it even easier, I created a test page where you can consider everything yourself .

Because CSS gradients require a minimum of two colors to display, both methods provide us with the ability to use many colors to create complex gradients on the page.

So, the syntax for creating a rainbow gradient will be as follows:

/ * fallback * /

background: # F66 url (rainbow-gradient.jpg);

/ * mozilla gradient * /

background-image: -moz-linear-gradient (left, right,

      from (red),

      color-stop (16%, orange),

      color-stop (32%, yellow),

      color-stop (48%, green),

      color-stop (60%, blue),

      color-stop (76%, indigo),

      to (violet));

/ * webkit gradient * /

background-image: -webkit-gradient (linear,

      left top, left bottom,

      color-stop (0.00, red),

      color-stop (16%, orange),

      color-stop (32%, yellow),

      color-stop (48%, green),

      color-stop (60%, blue),

      color-stop (76%, indigo),

      color-stop (1.00, violet));

What is interesting is that IE can also display similar simple gradients (including rainbows) using the filter property that has been present since IE5.

So, IE-friendly code looks like this:

filter: progid: DXImageTransform.Microsoft.gradient (

      enabled = 'true',

      startColorstr = # A1D004,

      endColorstr = # 6B9A00,

      GradientType = 0

);

There are two things you need to know about this code.

Firstly, although it is ugly, you can see where the initial and final colors are set.

Secondly, believe it or not, the little-known GradientType parameter actually sets the direction of your gradient. Set it to 0 for a vertical gradient and 1 for a horizontal one. As far as I know, in IE it is impossible to set a diagonal gradient or intermediate colors.

It seems to me that there are three advantages to using CSS gradients.

1. Unlike images, CSS gradients scale proportionally to the element containing them, allowing them to expand and contract according to the behavior of the content on the page.
2. CSS градиенты очень эффективны, позволяя Вам генерировать большие, гибкие, структурированные площади необходимых тонов всего лишь с помощью нескольких строчек кода. Это значительно сказывается на скорости загрузки страницы для Ваших пользователей.
3. Существует множество ситуаций когда изображения могут быть блокированы пользователем из соображений безопасности или по вопросам пропускной способности своего интернет-канала. CSS градиенты с большой вероятностью дадут Вам комплексные цвета, которые изображения не смогут Вам дать — например в Safari на iPhone.

Итак, можем ли мы использовать это свойство прямо сейчас?

Once again, as far as you can reasonably use it, I will answer yes.

It is clear that the latest versions of Safari, Chrome, and Firefox will well support this feature. IE implements reasonably tolerant gradient support. And that’s roughly half the browser, not even talking about when the stable version of Firefox comes out.

The remaining browsers always have the opportunity to set the gradient in the same way as you set it using conventional means.

Total

It’s enough to just give a bunch of arguments against using these properties and innovations - they are still too premature and the technologies are still raw. Nevertheless, you should play a good game with these tools in order to use them expertly, since gradients and multiple background images will certainly become “bread and butter” for leading developers in the future.

I guess the time for games is now.

Note:

A / I apologize for my imperfect translation. If anyone notices an error, please write in the comments, I will fix it right away.

B / Since beginners can read the article, I want to give a brief reference on selectors and declarations. Let's define the terms:

p {
font-family: Arial, Helvetica, sans-serif;
}

here the selector is - p
everything that is between curly braces {} this is the declaration block
declaration this is font-family: Arial, Helvetica, sans-serif;
the declaration itself consists of a property - font-family and values ​​- Arial, Helvetica, sans-serif