29731 2016-07-15 10:01:46 +0000 Add Attribute to Reset the viewport in specific context 2017-05-28 09:19:08 +0000 1 1 1 Unclassified HTML.next default unspecified All All RESOLVED MOVED P2 major --- 1 philippwrann dave.null lwatson mike robin public-html-bugzilla oldest_to_newest 126956 0 1649 philippwrann 2016-07-15 10:01:46 +0000 Created attachment 1649 basic example I have been thinking about element queries and math-based css selectors to enhance modular web development and presentation of html fragments in different scenarios. The most simple method (in terms of backwards compatibility and complexity) i came up with is the following approach: Introduce a new html attribute or css property that can be applied on certain html tags to reset the viewport (base for media query calculations). Once media queries are evaluated the viewport root is used for calculation instead of the screen. As a fallback (height for example) the screen/media will be used. That way you could style widgets/html fragments for the context they are displayed in (instead of the media they are rendered on). A css property (like: viewport:reset or media:reset-viewport) or a html attribute (<section resetviewport></section>) would be necessary. I think many other approaches (element query or math-based selectors) to handle the problem of "adaptive layouts" have massive downsides. let me know what you think about this. 128614 1 lwatson 2017-05-28 09:19:08 +0000 Moved to the HTML repo as issue 938: https://github.com/w3c/html/issues/938 1649 2016-07-15 10:01:46 +0000 2016-07-15 10:01:46 +0000 basic example viewport-reset.html text/html 918 philippwrann PCFkb2N0eXBlIEhUTUw+CjxodG1sPgoJPGhlYWQ+CgkJPHRpdGxlPkZvbzwvdGl0bGU+CgkJPHN0 eWxlPgoJCS52aWV3cG9ydCB7CgkJCXZpZXdwb3J0OnJlc2V0OwoJCX0KCQlAbWVkaWEgc2NyZWVu IGFuZCAobWluLXdpZHRoOjQwMHB4KSB7CgkJCS53aWRnZXQgewoJCQkJZm9udC1zaXplOiAycmVt OwoJCQl9CgkJfQoJCTwvc3R5bGU+Cgk8L2hlYWQ+Cgk8Ym9keT4KCQk8YXJ0aWNsZT4KCQkJPGhl YWRlcj4KCQkJCTxoMT5Gb288L2gxPgoJCQk8L2hlYWRlcj4KCQkJPGRpdiBjbGFzcz0iY29udGVu dHMiPgoJCQkJPHA+CgkJCQkJc29tZSBjb250ZW50CgkJCQk8L3A+CgkJCQk8ZGl2IGNsYXNzPSJ2 aWV3cG9ydCIgcmVzZXR2aWV3cG9ydD4gPCEtLSBkaXNwbGF5ZWQgaW4gY29udGVudCBhcmVhLCB0 YWtpbmcgNTAwcHggLS0+CgkJCQkJPGRpdiBjbGFzcz0id2lkZ2V0Ij4gPCEtLSBtZWRpYSBydWxl IGlzIGFwcGxpZWQgLS0+CgkJCQkJCXNvbWUgbW9kdWxhciBjb250ZW50IGkgZG9udCBrbm93IGFi b3V0IGFuZCBjb250ZW50IGRvZXMgbm90IGtub3cgd2hlcmUgaXQgaXMKCQkJCQk8L2Rpdj4KCQkJ CTwvZGl2PgoJCQk8L2Rpdj4KCQkJPGFzaWRlIGNsYXNzPSJzaWRlYmFyIj4KCQkJCTxkaXYgY2xh c3M9InZpZXdwb3J0IiByZXNldHZpZXdwb3J0PiA8IS0tIGRpc3BsYXllZCBpbiBzaWRlYmFyIGFy ZWEsIHRha2luZyBvbmx5IDIwMHB4IC0tPgoJCQkJCTxkaXYgY2xhc3M9IndpZGdldCI+IDwhLS0g bWVkaWEgcnVsZSBpcyBub3QgYXBwbGllZCAtLT4KCQkJCQkJc29tZSBtb2R1bGFyIGNvbnRlbnQg aSBkb250IGtub3cgYWJvdXQgYW5kIGNvbnRlbnQgZG9lcyBub3Qga25vdyB3aGVyZSBpdCBpcwoJ CQkJCTwvZGl2PgoJCQkJPC9kaXY+CgkJCTwvYXNpZGU+CgkJPC9hcnRpY2xlPgoJPC9ib2R5Pgo8 L2h0bWw+