Ok, I know that HTML5 is still been developed and lots of its features are not yet compatible with all the browsers. And some web developers are even yet to learn the new features of html5 and start using them in their day-to-day designs. I know that 90% of css3 properties are not yet fully embraced by web developers and browsers.
So why will anyone want to start thinking of HTML6 and CSS4? Isn’t that trying to mess up with html and css entirely? Well, I was thinking and it came to me that there are some features I will like to see in html and css in the future.
Let’s get started.
**HTML6**
**<picture></picture>** – This is even been advocated already by web developers. It may replace in the future.
**<responsive></responsive>** – This will wrap the overall webpage. It will open after body tag and closes before it.
**<social></social>** – This will be used to mark up social media networks like facebook and twitter.
**<translate></translate>** – This will be used to translate any text from English to major languages like French.
**<list></list>** – This will replace and . You just click inside the opening and closing list tag and start typing without . When you finish typing a particular line, just end it with **>**.
Like:
<list>
Web Design>
Graphics>
Training>
</list>
**<link></link>** – This will replace . You will just type your link like this: <link>index.html</link>
**<info></info>** – This will be used to write contact info like url, email, phone, etc. It will show in a special character.
**<page></page>** – This will replace <div id=”wrapper”></div>. It will be used as the main container of each web page.
**<logo></logo>** This will be used to mark up your logo. Whether your logo is an image or text, you will write it like this: <logo>images/logo.png</logo>. It will be styled later in css4.
**<paint></paint>** – This is bringing photoshop brush to the web without using an image. You will see how it works in css4.
**CSS4**
**picture**{
scale:proportionally;
color-ehancement:brighter;
quality-enhancement:high;
load-optimizer:fast;
}
**responsive**{
mobile[240px, 320px, 480px, 640px]: respond;
desktop[960px, 1024px, 1200px, 1600px]: respond;
fitted: true;
}
**social > facebook**{
background-color:fb-color;
hint: ‘Like us on facebook’;
hint-popup: top; /*This will have right, left, top and bottom*/
hint-color: #fff;
hint-bg: #000;
}
**translate**{
lang: ‘french’; /*It will support other languages like: Portuguese, German, Greek, Latin, Arabic, etc*/
}
**list**{
type: ul; /*You can also set the value to ol*/
bullet: disc; /*You can also set to square, circle, etc.*/
}
**link**{
color: red;
hover: black; /*No more something like a:hover*/
}
**info**{
/*This will have normal css styling like color, font-size, etc, but it will have a special styling by default.*/
}
**page**{
/*This will have normal css styling like width, border, background, etc.*/
}
**logo**{
place: left; /*the value can be set to right or center. Left is the default value*/
}
**paint**{
style: splatter; /*This will have values like: splash, smooth, rough, zigzag, etc*/
color-mixture: red + yellow; /*You can mix multiple colors as long as you mix them with + sign*/
}
Let me know what you think. Am I running out of my senses?
