CSS4

css4

 

First of all I would like to start with that there has never been anything like CSS4.
It’s the development of independent modules published after CSS 2.1.

To be more precise and accurate, we might like to explore the content from the following post.
A Word About CSS4

But still in order to explore the latest so called CSS4, we can discuss about the latest selectors that have been developed so as to ease the pain of using javascript / jQuery extensively.

First nice feature I would be discussing would be giving styles to the parent element based on its child element. Consider the following line:

ul > li:hover {color:#ff0000;}

Here li is a child element and ul is a parent element. So, here the color of li will change when list item is hovered.
Introducing the “$” in the syntax. This allows for styling of a parent element (‘ul’ here) based on its child element (‘li’ here). See the example below:

$ul li:hover {color:green;}

Here, if one hovers over a list element, the whole list will turn green. This is a great and dearly needed feature.

Kindly refer to further posts coming in near future to know more features.

Using CSS3 for new websites. Mistake or not?

Whenever there is an order for a new website, I wish I could use some CSS3 in order to lessen my burden.
But seniors always ask me to again go with traditional image style.

According to w3schools, less and less users are using not-css3 browsers.
Most of them use either Firefox or Chrome whereas IE6, IE7 and IE8 are loosing the market and are used by only approx 12% of all the users.
So do you really think it’s mistake to develop a new website with css3 properties (rounded corners, for example)?

There are certain things that are needed to be kept in mind. One of such things is audience. It all depends on targeted users.

  • In house websites you can use css3 as you can tell people inside your company what browsers to use.
  • Websites where the target users are kids / teenagers / youngsters, you can go with CSS3 since youngies are always uploading the latest everything.
  • Websites which for mobile use, Phones and tablets, you should use css3 since you need a lot of the power to design them write.

But, CSS3 is a strict no-no for commercial websites. In case of the more mature audience I would suggest you to wait for a year or so. A lot of companies have old computers on their desks and don’t like bothering with updates.

Moreover, I recently was working on a grand web portal, where I implemented CSS3. Tried checking each and every page not only while designing HTML but also after integration with W3C validator. FF has a local w3c validator in its tools. So, small things don’t affect much usability on IE6, IE7, IE8. Here your web layout plays a grand role, and hence it should be very user friendly. The areas where I implemented round-corners through CSS3 (for example in menu, buttons, headings, backgrounds, etc) were squared in IE-series. The gradients had no gradient but simply color, text-shadows had no shadow, etc. But still it was really cool to work on due to the functionality, speed and simple look & feel on those sick IE browsers.

Firefox image screenshot
normal Screen with CSS3 use

IE6, IE7, IE8
not so distorted with use of CSS3

PUNCH : Those who don’t have modern browsers or used to work on old IE browsers will never know how beautiful your website looks with CSS3 effects but still they will love the website with simpler look and feel.