Can you use css3 now

There is just no reason not to use them. We are the ones who can push the cross-browser support of these new technologies, encouraging and demanding the new features in future browsers. More exciting things will be coming in the future.

We should design for the future and we should design for today — making sure that our progressive designs work well in modern browsers and work fine in older browsers. The crucial mistake would be clinging to the past, trying to work with the old nasty hacks and workarounds that will become obsolete very soon.

We can continue to cling to this notion and wait for older browsers to become outdated, thereby selling ourselves and our potential short, or we can adjust our way of thinking about this and come at the Web from a whole new perspective. One where we understand the truth of the situation we are faced with. That our designs are not going to look the same in every browser and our code will not render the same in every browser.

Articles like these are the ones that push the boundaries of web design and encourage more innovation in the industry. He really struck a nerve with his presentation, yet still we find so many stalling in this dream of complete Web standardization.

So we wanted to address this issue here and keep this important idea being discussed and circulated. Because this waiting is not only hurting those of us working with the Web, but all of those who use the Web as well. Mainly through this plethora of untapped potential which could improve the overall experience across the spectrum for businesses, users and those with the skills to bring this sophisticated, rich, powerful new Web into existence.

Now this will mean different things for different players in the game. For example, for our clients this means a much more developed and uniquely crafted design that is not bound by the boxes we have allowed our thinking to be contained in. However, this does come with a bit of a compromise that is expected on the parts of our clients as well.

At least it does for this to work in the balanced and idealized way these things should play out. But this should be expected.

Most change does not come without its compromises. In this case, our clients have to accept the same truism that we do and concede that their projects will not look the same across various browsers. This is getting easier to convince them of in these times of the expanding mobile market, but they may still not be ready to concede this inch on the desktop side of the coin.

Prices might be adjusted in some cases too, and that may be another area that the clients are not willing to accept. But with new doors being opened and more innovation, comes more time and dedicated efforts. These are a few of the implications for our clients, though the expanded innovation is where we should help them focus. The users are the ones who have the least amount invested in most of what is going on behind the scenes.

They only see the end result, and they often do not think too much about the process that is involved which brings it to the screens before them. Again, with the mobile market, they have already come across the concept of varying interfaces throughout their varied devices. They only care about the functionality and most probably the style that appeals to them — but this is where their interest tends to end.

Only nightly builds of Webkit and Opera pre-alpha support border-radius out of the box. Those three extra rules target specific browser rendering engines. To be frank, nothing in your layout is going to break if IE displays straight corners. The chances of a viewer poking their eye out on one of your sharp corners is very slim, so stop worrying about it.

If you really want IE support, be my guest. The A stands for Alpha transparency. What if we made the background a semi-transparent PNG instead of a flat color? Using a combination of Modernizr and CSS3 properties, we made the design look beautiful and still remain backwards compatible. Design for the best browser available and make the design work for lesser browsers; not the other way around. What other uses of Modernizr and CSS3 can you think of to make your life easier?

All background-releated CSS rules can now take a comma-delimited list of properties, each for the specific background image:. For more information on multiple backgrounds, see here. Browser support is very good - all recent versions support the rule see the table. Column-based layouts were notoriously difficult to pull off in CSS.

It usually involved using JavaScript or server-side processing that splits the content into different elements. This is unnecessarily complicated and takes precious development time away from what really matters.

Fortunately, now there is a way around this by using the CSS columns rule:. There is good support for this rule, although it still requires prefixes.

Where things break down is with the support of some of the other column-related rules and differences between browsers in handling corner cases. There is nothing more flashy and full with eye-candy than an impressive 3D CSS demo. Although its utility outside of demos or portfolio sites is questionable, 3D CSS offers some powerful features to designers and developers that can win the hearts of users if done with good measure.

Browse through the source code of the following example by hitting the Edit button, to see how it was made. This code was modeled after our Apple-like Login Form tutorial, which I advise you to read. If you want to learn more about 3D CSS, take a look at this detailed introduction.

If you don't need to target old IE, browser support is also very good. There are other notable features that are worth mentioning. If you haven't already, you should stop using prefixes for border-radius and box-shadow. You can also now use data-uri as background images in every browser. What an awesome list of CSS3 features But overall a really useful list of new features that any designer would want to implement Awesome practical tutorial.

I learnt and experimented so many CSS3 features in one go! Thanks for sharing :. CSS3 only introduced double-colon syntax for pseudo-elements to distinguish them from pseudo-classes. Awesome stuff, Martin! I've been meaning to look into calc for a while. Now I need to start using it if it's supported by most modern browsers! A few of these CSS3 features have been supported since IE8 namely box-sizing and border-radius and webfonts have been supported for ages.

Ignoring IE8 is possible, but IE9 is still widely used and should not be ignored just yet. Take this guide with a grain of salt and read into some of these things people, they're not all quite usable yet. You are right, there isn't good support for older browsers. With the release of IE11 this is the first time that all of these 12 can be used in every major browser, which I think is a good win and will only get better. Mobile browser support is still poor for some of these awesome features but it's rising fast.

Thanks for sharing this! Nice summary here, some neat features indeed. One bit of feedback: using Firefox 24 on OS X In some cases, I can't scroll through your whole code snippet without having the editor go right off the top of the screen, so I have to repeatedly drag the page back down in order to scroll through the code. Really enjoy the reading, thanks for the article.

I have a question about the pseudo element selector used in the examples, why is it using 2 colons eg. I edited them to single colon, it's also working. But I wonder if there is any special usage of 2 colons? The :before and :after selectors were first introduced in CSS 2. CSS3 changed these to ::before and ::after, but because browsers support both specs, both versions work.

Great article, I had no idea some of these features were supported so well. Will definitely be using calc from now on. Nice overview. Didn't know about the Columns. But my favourite is the calc feature ; definitely gonna use that. Thanks for sharing! Very nice feature overview. You mention in the introduction already the lack of support in older versions of IE for some of the features listed. But it's not just IE and it seems to me that some of the readers don't see that, even though you provided links to 'caniuse' everywhere.

The second link under "3. Advanced Selectors" is a duplicate of the first one. Is it possible that "browsers support them. Great blog post showcasing some awesome CSS3 properties. I forgot about ::first-letter and ::first-line. Excellent article! However, isn't it optimistic to consider calc can finally be used when it is still in Candidate Recommendation and considered "at risk"?

CSS3 Values and Units status. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links. At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.

Now it's time to look at how to place your boxes in the right place in relation to the viewport, and to each other. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about. This module provides links to sections of content explaining how to use CSS to solve common problems when creating a web page.

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your sites.