CSS3 and CSS4 New Features

CSS3 and CSS4 New Features

Some of the new awesome features in css3 and css4 are:

• Media Queries: In the CSS2 media type is there but now it converted into media queries with enhancement of @media rules and “media” HTML markup element. like width and height of the viewport, width and height of the device, orientation (is the tablet/phone in landscape or portrait mode), resolution and much more
• CSS Selectors Level 3: It describes the element selectors used in CSS
• Grid template layout: Using: display:grid; or display:inline-grid; you can make a grid template layout in a better way without use of other things.
• Aural Style sheets: It is very useful for a blind person who can’t see the website but after using aural style sheets, Blind person know what happened in the website. some of the tags are azimuth, cue, cue-after, cue-before, elevation, pause, pause-after, pause-before, pitch, pitch-range, play-during, richness, speak, speak-header, speak-numeral, speak-punctuation, speech-rate, stress, voice-family and volume etc.
• Backgrounds and borders: In the CSS3, more tags and attributes of background colors and images and the style of borders as compare to older version.
• Basic user interface: In the CSS3 new basic styling tags and attributes for web pages. some of them are resize. outline-offset etc.
• Basic Box model: It is very useful for every webpage because it shows the layout of block-level content in normal flow.
• Extended Box model: It provides more control over positioning, floats and the size of boxes.
• Marquee: Now you can use animation with marquee and many more effects.
• Cascading and inheritance: Now we can inheriting properties as well as it tells how values are assigned to properties.
• Color: Now we can use billions of colors just because off css3.
• Fonts: We can adjust the font in a better way.
• Generated Content for paged media: You can generate content for paged media.
• Page floats: It contains properties to float elements to the top, bottom, left side or right side of a webpage.
• Generated and replaced content: We can replace content before, after, or in place of an element.
• Hyperlink: We can stylee of hyperlinks in a better way.
• Line layout: Now you can define alignment of text and other boxes within a line.
• Lists: Now you can style your list in a better way.
• Multi-column layout: It defines properties to control your flow content into flexible columns.
• Object model: It defines and elaborate programming model.
• CSSOM View model: It defines a way to manipulate the view information of a document in a better way
• Paged media: You can use the paged media using @page.
• Positioned layout level 3: It defines a ways of CSS to layout parts of a document.
• Presentation levels: Now we can present the same document in a better way.
• Ruby: It is used to manipulate the properties of positions of ruby in a best way).
• Grid Layout: CSS3 helps to create a flexible grid sstem.
• Regions: CSS3 describes what can be done with regions
• Speech: It is very useful for blind person and good for those who likes aural things. It also specify the properties of speech synthesizer.
• Tables: It defines all the table tags and attributes
• Text: We can modify the text realted things.
• Writing Modes: We can easily control the direction of text.
• Line grid: We can easily create a line grid
• Values and units: We can define the values and units in a better way.