If you are into web design NYC, and you come across a demo of the new CSS, you
cannot really wait to start using it in your work. Of course, then you find out
that you can use it in only one to two browsers, so what you ultimately do is
decide to wait. Well, do not be disappointed, because there's good news for
you; which is, with the latest browser releases, you can use some great new
features that are supported by all browsers. You can actually start using them
now!
However, let me tell you that most of
these features will not be working on the older versions of Internet Explorer,
i.e., 9 and below. So, if these browsers happen to be a major part of your
client base, then, unfortunately, you will not be able to use the following
features. But, for others, here's what modern browsers have to offer.
·
CSS
animations and transitions
Animations in CSS now can be availed in
all major browsers, including Internet Explorer 10. CSS animations can be
created in two different ways. The first one is quite simple. It is done
through the animation of the alterations of CSS properties with transition
declaration. You can create mouse down and hover effects with transitions. You
can also trigger animation by changing the element's style with JavaScript.
The second way for doing it is a bit more
complicated in the sense that it involves the description of specific moment of
the animation with the rule of keyframe.
·
Values
calculated with Calc
The function of Calc is another new feature
of CSS. With this, you can do simple arithmetic in Cascading Style Sheet. You
can use it anywhere a size or length is needed. What's even better is that you
get a chance to mix pixels and percentages freely. However, the greatest news
is that it works on Internet Explorer 9 onwards and is free of prefixes.
·
Advanced
selectors
These days, it is wrong if you assign IDs
to elements only for the sake of styling them. Quite a number of powerful
selectors have been introduced by CSS 3 and 2.1, with which you can make your
layouts and style sheets more clearer.
·
Generated
content and counters
For web design NYC developers, generated content is a powerful
tool, that is available before and after pseudo elements. With this feature,
you can use less HTML for getting the same layouts. This is particularly
beneficial in cases where you are required extra box shadows or other visual
elements that require extra divs and spans. This way you can get more minimal
and semantically proper HTML.
·
Gradients
This feature allows developers a chance
of smooth transition between colours without making use of images. The
gradients of CSS also look great on retina displays as they are generated on
the fly. They can be radial or linear, and can be set for repetition. They are
being used for quite some time, but after certain changes over the time, they
are now available everywhere, free of prefixes.
·
Webfonts
There was a time when our options were
limited to only a few 'web-safe' fonts. These days it is unthinkable,
especially when we have services like typekit and Google Fonts, with which we
can embed fonts by simply including a stylesheet on the page we are working on.
Besides, you can also make use of icon fonts like fontawesome, which contain
vector icons, instead of numbers and letters. This is made possible by the rule
of font-face, which allows you to determine name, characteristics and source
files for fonts, which can later be referred to in font/font-family
declarations.
So, if you happen to be into web design NYC, you will definitely
benefit from the CSS3 features discussed above.
Author bio: James Butler is an experienced
professional in web design NYC. His blogs and articles are
quite popular amidst budding as well as experienced designers.
