Kornel Lesinski just published a new proposal on the WHATWG mailing list this morning. He proposes a new element in HTML called <pic> which is shorter to write than <picture> would be.<\/p>\n
This solution combines the advantages of our proposal of the picture-element and the proposal of the resolution based srcset approach by the WHATWG published recently.<\/p>\n
The syntax also can be written in a short way and in a long way. This is good for developers because normal developers can write it the common HTML-like way while advanced developers are provided with a short-syntax.
\nAlso the syntax is able to use @media-queries as well as resolutions.<\/p>\n
In short syntax the code could look:<\/p>\n
<pic src=\"small.jpg (max-width:320px), medium.jpg (max-width:768px), large.jpg\">alt text<\/pic>\r\n\r\n<pic src=\"portrait.jpg (orientation:portrait), landscape.jpg\">alt text<\/pic>\r\n\r\n<pic src=\"small.jpg 0.5x, medium.jpg 1x, large.jpg 2x\" style=\"width:100%\">alt text<\/pic><\/pre>\nWhile the long syntax could be like that:<\/p>\n
<pic>\r\n <source src=\"large.jpg\" media=\"(min-width:1024px)\" width=\"1024\" height\"=\"300\">\r\n <source src=\"medium.jpg\" media=\"(min-width:768px)\" width=\"768\" height=\"200\">\r\n <img src=\"small.jpg\" width=\"320\" height=\"100\">\r\n alt text\r\n<\/pic><\/pre>\nThis of course is a first proposal to which I already replied with several improvements but it looks like we finally get in the right direction where we will get the best approach we can find together. And I am super happy that this has been proposed.<\/p>\n
Here is the full description<\/a> and here the link to the thread<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Kornel Lesinski just published a new proposal on the WHATWG mailing list this morning. He proposes a new element in HTML called <pic> which is shorter to write than <picture> would be. This solution combines the advantages of our proposal … Continue reading