Still we are learning and implementing CSS3.In the mean time a new CSS version CSS4 come into the picture.
Now this is in a conceptual stage. And in the near future it can make web developer's life easy.
Today I will tell about some beautiful feature of CSS4.
Now for selecting parent of an element we need to use javascript or query or other languages. But now we can do that using CSS.
$ul li: hover
{
background-color: #fff;
}
Using the above, when hovering a list element, the whole unordered list will be somehow highlighted by adding a white background to it.
This property is very much helpful in case of fieldset element. Because in User input from we can change the color of the input row according to the mouse position.
The syntax is like below.
: matches (section, nav, article, aside) h2
{
font-size: 14px;
}
Using this CSS the all h2 elements under section, nav, article and aside tag become font-size 14px.
This tag makes CSS file small and compact.
So if we like to style the link element according to their redirect position then this tag is the only choice for us.
#nav a:local-link {
color:blue;
}
#nav a:local-link {
color:red;
}
Using this style element all the link which redirect to different domain become red color and the link's which stay in the same domain become blue.
the CSS like below
div: dir (ltr) {font-size: 12px;}
div: dir (rtl) {font-size: 14px;}
Using this CSS all languages which are left-to-right(like English,Spanish,German) becomes font size 12px and the languages which are right-to-left(like Arabic) become font size 14px.
5.Other Usefull pseudo-classes of CSS4
:valid / :invalid
:default
:enabled / :disabled
:checked
:indeterminate
:in-range / :out-of-range
:required / :optional
:read-only / :write-only
Those above classes are self-explanatory.Still I write a small description about those.
:valid / :invalid - it will check an input it valid or not.And style the element according to that.
:enabled / :disabled - Style element according to their state.If they enable then its design according to the :enable style or it will design as :disabled.
:checked - it will style the element when a checkbox or radio button is checked.
:indeterminate - it's a special state of the element.Like there is a progress bar.And I did not did not get the grogress information about that element.Then that state is called as indeterminate.And it will design using :indeterminate in CSS4.
:in-range / :out-of-range - if I restrict user to input data between a range then we can style the element as :in-range and :out-of-range to show different style betwwen valid and invalid input.
:required / :optional - this style differentiat between mandatory and optional data.
:read-only / :write-only - this can give different style to read-only field and read-write field.
a) auto-hide - being added to WebKit as -webkit-auto-hide.
b) grab - supported by Mozilla as -moz-grab
c) grabbing - supported by Mozilla as -moz-grabbing
When a user touches an element, that element's touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming. The touch behavior is then performed on the nearest ancestor element that is capable of that behavior, unless an intermediate ancestor element specifies that the behavior is not permitted.
Syntax :
-ms-touch-action: auto | none | [ [ [ pan-x || pan-y || pinch-zoom ? ] | manipulation ] || double-tap-zoom ? ]
for more details view
http://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx
Now this is in a conceptual stage. And in the near future it can make web developer's life easy.
Today I will tell about some beautiful feature of CSS4.
1. THE “PARENT” SELECTOR
Now for selecting parent of an element we need to use javascript or query or other languages. But now we can do that using CSS.$ul li: hover
{
background-color: #fff;
}
Using the above, when hovering a list element, the whole unordered list will be somehow highlighted by adding a white background to it.
This property is very much helpful in case of fieldset element. Because in User input from we can change the color of the input row according to the mouse position.
2. Matches-Any pseudo-class
The : matches () CSS4 selector is the standardized version of Mozilla’s : -moz-any () pseudo class. This matches can group many elements to gather and implement the OOPs concept in CSS.The syntax is like below.
: matches (section, nav, article, aside) h2
{
font-size: 14px;
}
Using this CSS the all h2 elements under section, nav, article and aside tag become font-size 14px.
This tag makes CSS file small and compact.
3.Location Pseudo-Classes - :any-link and :local-link
These pseudo-classes will be used for location-based elements. The :any-link pseudo-class is used for general links, while :local-link is used to identify links targeted within the same host (as opposed to external href's).So if we like to style the link element according to their redirect position then this tag is the only choice for us.
#nav a:local-link {
color:blue;
}
#nav a:local-link {
color:red;
}
Using this style element all the link which redirect to different domain become red color and the link's which stay in the same domain become blue.
4.Linguistic Pseudo-Class - :dir
:dir Pseudo-Class idenfy left-to-right and right-to-left text display and you can give your custom style according to that.the CSS like below
div: dir (ltr) {font-size: 12px;}
div: dir (rtl) {font-size: 14px;}
Using this CSS all languages which are left-to-right(like English,Spanish,German) becomes font size 12px and the languages which are right-to-left(like Arabic) become font size 14px.
5.Other Usefull pseudo-classes of CSS4
:valid / :invalid
:default
:enabled / :disabled
:checked
:indeterminate
:in-range / :out-of-range
:required / :optional
:read-only / :write-only
Those above classes are self-explanatory.Still I write a small description about those.
:valid / :invalid - it will check an input it valid or not.And style the element according to that.
:enabled / :disabled - Style element according to their state.If they enable then its design according to the :enable style or it will design as :disabled.
:checked - it will style the element when a checkbox or radio button is checked.
:indeterminate - it's a special state of the element.Like there is a progress bar.And I did not did not get the grogress information about that element.Then that state is called as indeterminate.And it will design using :indeterminate in CSS4.
:in-range / :out-of-range - if I restrict user to input data between a range then we can style the element as :in-range and :out-of-range to show different style betwwen valid and invalid input.
:required / :optional - this style differentiat between mandatory and optional data.
:read-only / :write-only - this can give different style to read-only field and read-write field.
6.New Properties for Borders
Some new properties for borders are introduced in CSS4. The most obvious one is a border-corner-shape, which allows values curve | bevel | scoop | notch. In addition, there are updates on border-images.7.New cursor values
CSS4 define three new cursor values.They are -a) auto-hide - being added to WebKit as -webkit-auto-hide.
b) grab - supported by Mozilla as -moz-grab
c) grabbing - supported by Mozilla as -moz-grabbing
8.Touch-action
The touch-action CSS property determines whether touch input may trigger default behavior supplied by the user agent. This includes, but is not limited to, behaviors such as panning or zooming.When a user touches an element, that element's touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming. The touch behavior is then performed on the nearest ancestor element that is capable of that behavior, unless an intermediate ancestor element specifies that the behavior is not permitted.
Syntax :
-ms-touch-action: auto | none | [ [ [ pan-x || pan-y || pinch-zoom ? ] | manipulation ] || double-tap-zoom ? ]
for more details view
http://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx
Sign up here with your email
ConversionConversion EmoticonEmoticon