Sponsored Post
The course of HTML is being directed, without question, by the developments taking place in the world of CSS. Many of the advancements in multimedia have been realized thanks to the shifts in styling language. New elements have led to changes in the way that web designers have been realizing the visions of their clients, and given rise to a level of functionality that most developers never expected to be seeing so soon.
Innovations still to come in CSS3
One of the most interesting innovations in the current incarnation of CSS (CSS3) is the Flexbox. Flexbox is a new way forward in placing content on web sites and controlling how that content is displayed.
With Flexbox, the problem of floats will become a thing of the past, or at least a way of designing pages relegated to the poorly informed and unambitious web developers.
The CSS Flexbox model gives the ability to create some very complex web designs with some abbreviated lines of code. If you are familiar with using div boxes you’ll probably recognize the use of float when positioning them on a web page.
This feature also allows web designers the use of the Flexbox order property so that you can design layouts that are not restrained by the rules of CSS. Say for example you wanted to place the header at the top of the page just set it to order: 1;. And it is done.
Early drafts of CSS4
Recently the W3C, also known as the World Wide Web Consortium or the governing body that controls what makes the CSS rule book has rolled out the blue print of what the new CSS4 will include.
They plan on adding more than 30 new rules that will help to simplify the way that CSS works and streamline development all around. This first draft is not currently supported by any browsers, but tin the next coming years these features will become a core component in how the internet works. You can have a look at them here to get an idea.
The Subject Selector
One of the most noted features of the coming incarnation of CSS, CSS4 is the release of “subject “or the parent selector. Selectors in CSS have been a part of the language since the beginning. In the past the rules were assigned to the internal elements of CSS; for example in the chain header h1 the rules is assigned to h1, with CSS4 you gain the ability to effect changes in only the elements that have an h1 child element.
Here is a more complex example. If you for some reason wanted to style a particular list (ul) but just when users click a particular item on the list, well you would add the class “clicked” (ul li. clicked) but what if you wanted to add a style to the whole list? The subject selector makes it simple:
| 1 | $ul li.clicked { | |
| 2 | background: white; | |
| 3 | } |
So the rule will apply to the ul, instead of the clicked li, which is what the $ means.
The Pseudo Selector
Another feature in the new CSS4 is the pseudo selector which will look like :matches (). This pseudo class will make the language writing much easier especially when writing nested CSS. For example:
| 1 | :matches(section, article, aside, nav) h1 { | |
| 2 | font-size: 3em; | |
| 3 | } |
These are just two examples of the sorts of changes that are going to be addressed in the next edition of CSS. As the date of its release draws closer we expect there will be several more iterations and updates on the draft as it stands, but you can be sure that once the final addition goes public you will see some big changes in the way CSS is used.
Pete Campbell works as a specialist web designer for JaskGroup.co.uk and loves all things code, web design and technology.
0 comments:
Post a Comment