Should i use css3 yet

To some extent, today we are in the situation in which we were in the beginning of s; at those times when the emergence and growing support of CSS in browsers made many developers question their approach to designing web sites with tables. Doubt is another thing we must consider when it comes to our being in hold mode, and this could be a major contributor to this issue. We begin to doubt ourselves and our ability to pull off this innovative, boundary pushing-kind-of-work, or to master these new techniques and specs, so we sink into the comfort of playing the waiting game and playing it safe with our designs and code.

We just accept the limitations and quietly work around them, railing on against the various vendors and the W3C. Faith can be a good thing, but in this case, it can hold you back. Image by fotologic. Undoubtedly, some of us are holding off on moving forward into these new areas because we are faithfully clinging to the belief that the cross-browser support push will eventually happen.

There are those saying that we will be better off as a community if we allowed the Web to evolve, and that this evolution should not be forced. But this is not forcing evolution, it is just evolution. It is a gradual change over time. And that is what we should be allowing to happen with the Web, gradually using and implementing features for Web community here and there. This way forward progress is happening, and nobody should be held back from these evolutionary steps until we all can take them.

Some members of the online community faithfully fear that if they go ahead and accept this new way forward and begin designing or developing in accordance, then as soon as they begin completing projects, the support might be dropped and they would need to update the projects they already completed in the past. The widely accepted features are safe to use and they will not disappear for certain; the experimental features can always be extracted in a separate stylesheet and be easily updated and maintained when necessary.

It might be a good idea not to use experimental, unsupported features in large corporate designs unless they are not affecting the critical design elements of the design. We cannot forget to mention that there are also many of us who are refusing to dabble in these new waters simply due to the fact that implementing some of these techniques or styles would cause a plethora of vendor-specific pefixes to appear in the stylesheet, thus impeding the validation we as professionals strive for.

Many of us would never put forth any project that does not fully validate with the W3C, and until these new specs are fully standardized and valid, we are unwilling to include them in their work. Well, not quite. It neither contributes to accessibility, nor points out best-practices. And never, ever, ever compromise the use of the latest doctype, CSS3 techniques and selectors for the sake of validation. We should not let this factor keep us back. Whatever the factors that keep us from daring into these new CSS3 styles or new HTML5 coding techniques, just for a tangible example, need to be gotten over.

Plain and simple. The community will become a much more exciting and innovative playground, which in turn will improve experiences for as well as draw in more users to this dynamic new Web, which in turn will attract more clientele — effectively expanding the market. This is what could potentially be waiting on the other side of this fence that we are timidly facing — refusing to climb over it.

Instead, waiting for a gate to be installed. Until we get passed this limited way of looking at the situation, only then will we continue falling short of the full potential of ourselves and our field. Are there any areas that you would love to be venturing into, but you are not because of the lack of complete cross browser compatibility?

This ensures that all browsers that support any of the above forms of the property can make the feature work. It is worth putting the non-prefixed version last, because that will be the most up-to-date version, which you'll want browsers to use if possible. If for example a browser implements both the -webkit- version and the non-prefixed version, it will first apply the -webkit- version, then override it with the non-prefixed version.

You want it to happen this way round, not the other way round. Of course, doing this for lots of different CSS rules can get really tedious. It is better to use an automation tool to do it for you. And such tools exist:. The prefix-free JavaScript library can be attached to a page, and will automatically detect what capabilities are possessed by browsers viewing the page and add prefixes as appropriate.

It is really easy and convenient to use, although it does have some downsides see the link above for details , and it is arguable that parsing every stylesheet in your site and add prefixes at run time can be a drain on the computer's processing power for a large site. Another solution is to add prefixes automatically during development, and this and other things besides can be done using tools like Autoprefixer and PostCSS.

These tools can be used in a variety of ways, for example Autoprefixer has an online version that allows you to enter your non-prefixed CSS on the left, and gives you a prefix-added version on the right. You can choose which browsers you want to make sure you support using the notation outlined in Autoprefixer options ; also see Browserslist queries , which this is based on, for more detail.

As an example, the following query will select the last 2 versions of all major browsers and versions of IE above 9. Autoprefixer can also be used in other, more convenient ways — see Autoprefixer usage. Explaining how these work is somewhat beyond the scope of this article.

Another problem that might come up is differences in layouts between browsers. Historically this used to be much more of a problem, but recently, with modern browsers tending to support CSS more consistently, layout issues tend to be more commonly associated with:. Note: Historically web developers used to use CSS files called resets, which removed all the default browser styling applied to HTML, and then applied their own styles for everything over the top — this was done to make styling on a project more consistent, and reduce possible cross browser issues, especially for things like layout.

However, it has more recently been seen as overkill. The best equivalent we have in modern times is normalize. You are advised to apply normalize. Note: When trying to track down a tricky layout issue, a good technique is to add a brightly colored outline to the offending element, or all the elements nearby. This makes it a lot easier to see where everything is placed. See Debug your CSS with outline visualizations for more details.

Much of the layout work on the web today is done using floats — this is because floats are well-supported way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back. However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations e.

More recently, dedicated layout mechanisms have appeared, like Flexbox and CSS Grids , which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:. Layout features aren't as easy to provide graceful fallbacks for as simple colors, shadows, or gradients.

If layout properties are ignored, your entire design will likely fall to pieces. Because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the result we will cover feature detection in detail in a later article.

For example, you could apply a flexbox layout to modern browsers, then instead apply a floated layout to older browsers that don't support flexbox. Note: There is a fairly new feature in CSS called supports , which allows you to implement native feature detection tests. Responsive design is the practice of creating web layouts that change to suit different device form factors — for example, different screen widths, orientations portrait or landscape , or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using media queries , and make sure it is applied correctly using viewport.

CSS has come a long way since its early days. We can also create complex and responsive grid layouts with CSS, with a minimal footprint. While there are many new CSS features, I want to emphasize the new features we often use in modern web applications. We re-use a lot of colors and other elements such as fonts in our styling code. In order to declare these re-used properties in one place, SCSS offers variables.

This gives us the ability to define a color under a variable name and use the variable name everywhere in the project rather than repeating the color value. CSS lets us use variables as well using custom properties. This is how custom properties in CSS would look like. The reason being they are processed by the browser during runtime. Therefore, the use of variables and code re-use is better in performance with SCSS. If we consider a block of code in CSS such as,.

The above code seems cluttered with the same parent class having to repeat in order to apply styling for the child classes. However, with SCSS you can use a nested syntax that produces much cleaner code.

If not, give them a reason to upgrade! In general, newer browsers behave better than older ones. IE4 and O3. Those who don't use CSS-enhanced browsers can still read pages that use style sheets.

CSS was carefully designed so that all content should remain visible even if the browser knows nothing about CSS. Some browsers, such as Netscape's Navigator version 2 and 3 don't support style sheets but they know enough about the style element to fully ignore it.

Next to supporting style sheets, this is the correct behavior. However, other browsers that do not know the style element, such as Netscape's Navigator 1 and Microsoft Internet Explorer 2, will ignore the style tags but display the content of the style element. Thus, the user will end up with the style sheet printed on the top of the canvas. At the time of writing, only a few percent of Web users will experience this problem. To avoid this, you can put your style sheet inside an HTML comment , which we discussed in Chapter 1.

Because comments don't display on the screen, by placing your style sheet inside an HTML comment, you prevent the oldest browsers from displaying the style element's content. CSS-enhanced browsers are aware of this trick, and will treat the content of the style element as a style sheet.

Here's an excerpt from the previous code example that shows how you write a style sheet in an HTML comment. The browser also needs to be told that you are working with CSS style sheets.

For XML the situation might be different. So it's a good habit to tell browsers that they are dealing with CSS. In fact, HTML requires you to. The value of type indicates what type of style sheet is being used.

If it does, it will try to read the sheet, otherwise it will ignore it. The type attribute see Chapter 1 for a discussion on HTML attributes on the style element is a way to let the browser know which style sheet language is being used.

The type attribute must be included. To make examples easier to read, we have chosen not to wrap style sheets in HTML comments, but we do use the type attribute throughout this book. There are many reasons for having tree-structured documents. For style sheets, there is one very good reason: inheritance. Just as children inherit from their parents, so do HTML elements.

Instead of inheriting genes and money, HTML elements inherit stylistic properties. Overriding Inheritance In the previous example, all elements were given the same color through inheritance.