All geek questions in one place

Getting Safari to recognize <main> HTML 5

It seems that some fairly recent versions of Safari do not support the HTML5 <main> element. (I tested Safari 5.1.9 on Snow Leopard and mobile Safari running on iOS 4). Is there a way to get Safari to recognize the <main> element (e.g. shiv)?

I have compiled some code examples below. When viewed in a vulnerable version of Safari, the green <main> does not appear, if I have to add more text, it will flow outside the <main> element, as if it were not there.

HTML:

 <body> <main> <nav id="bar"></nav> <p>Lorem Ipsum</p> </main> </body>

CSS

 main{ width:800px; height:800px; background-color:#0C0; } #bar{ width:300px; height:400px; float:left; background-color:#09F; }
+6
source share
1 answer

Most browsers display unknown elements as if they were display:inline by default, so to pull this CSS, you need to do this:

 main { display: block; }

eg.

 main { display: block; width: 800px; height: 800px; background-color: #0C0; }

(I tested in Safari 6.0.5 on Mountain Lion.)

The site has a good entry for the <main> element: http://www.sitepoint.com/html5-main-element/

Theres also a great answer that describes in a general way how to make new HTML5 elements work (for some definition of "work") in older browsers: fooobar.com/questions/187227 / ...

+9
source

Source: https://habr.com/ru/post/949491/

More articles:


All Articles