Some of the AMP samples I have found seem to include the amp-custom tag before the amp-boilerplate.
<style amp-custom>
h1 {
color: red;
}
</style>
<style amp-boilerplate>.....</style>
While other examples show the amp-boilerplate before the amp-custom.
<style amp-boilerplate>
.....
</style>
<style amp-custom>
h1 {
color: red;
}
</style>
If I want my page to be compliant with AMP standards, should I place amp-custom style tag before or after my amp-boilerplate style tag.
For AMP validity, the order doesn't matter. However, the order of tags inside the header can affect page load performance. The recommended order for head tags is:
meta charset, then remaining meta tags.
AMP runtime v0.js <script> tag (this should start downloading as soon as possible as it's render blocking).
<script> tags for other render delaying extensions (amp-experiment, amp-dynamic-css-classes)
<script> tags for remaining extensions (amp-bind, ...)
<link> tag for favicon
<style amp-custom>
any other tags allowed in <head>
amp boilerplate, first style amp-boilerplate, then noscript. (putting the boilerplate lasts avoids custom styles accidentally overriding the boilerplate css rules)
Please note: this is only relevant for AMPs not served via the Google AMP Cache as the cache re-orders the head following these rules anyway.
I don't believe it matters which order you put them in. If you have concerns you can always run your code through the AMP validator tool or throw #development=1 after your URL and check the console in your browser dev tools.
Note: after adding #development=1 you may have to refresh the page twice with dev tools open to get it to show either a success or fail message in the console.
I just tried putting amp-custom before amp-boilerplate in the AMP validator tool as well as amp-boilerplate before amp-custom and both came back as AMP valid.
I know for our company website we put it after amp-custom due to what it defines for us so that it takes precedence over any other styling.
Related
I am trying to write some HTML5 standards compliant code, where certain scripts need to be run only after the user has consented to cookies.
The html code looks like this, where the consent-script element, works exactly the same as the script element, however holds off loading the script until the consent has been given.
<head>
<consent-script src="myscript.js"></consent-script>
</head>
Everything works fine in all browsers,
However when I attempt to validate this using https://validator.w3.org/ , the custom-element tag apparently closes the head section, and generates a pile of errors.
Looking at the specifications, I can't see any reason why custom-elements cant be used in the section. But I am not sure.
My question is, can HTML5 custom-elements be used in HEAD? If I can, then its a bug in the validator service. If not, then I will have to find another way of not running a script until the right moment.
Thanks.
EDIT. Further investigation (Thanks #Danny'365CSI'Engelman) leads me to believe that even a browser is moving the custom element out of the head section, into the body section.
Some mock up code:
The source is:
<!DOCTYPE html>
<html>
<head>
<my-custom-elem></my-custom-elem>
<!-- other tags in the HEAD -->
</head>
<body>this is the body
</body>
</html>
Yet, chrome developer tools gives me:
<html>
<head>
</head>
<body>
<my-custom-elem></my-custom-elem>
<!-- other tags in the HEAD -->
this is the body
</body></html>
I am converting my HTML page into AMP Pages.
I have seen test url https://validator.ampproject.org/#. This page is validate from AMP.
Screen Shot for Help:
But When I used External Css.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
Then It will fail.
Screen Shot For help.
Then how can I access materialize css file. Because I am using Materialize Ui framework in my website.
But I have read also about
<style amp-custom> </style>
SO AMP validate page suggest include inline css in amp-custom.
But materialize css is so long. It will break in some mobile browsers. Because https://github.com/ampproject/amphtml/issues/4555
If anybody have some idea then please share.
External Style Stylesheets are forbidden in AMP. You must include the CSS declaration self (up to 10.000 lines) between. This is for save time by additional network request and blocking rendering.
<style amp-custom>
...
</style>
currently there is no support for external css in Accelerated mobile pages. Although you can use inline css which was not allowed earlier. So you have to compromise with the css.
I am doing some work that would require me building up html inside of embedded iframes. Sort of like jsbin does.
However I'm stumped with my very first spike.
How come my html isn't being rendered when I put it inside an iframe?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<iframe>
<html>
<head><meta charset=utf-8 /></head>
<body>
<h1>Big Header</h1>
</body>
</html>
</iframe>
</body>
</html>
Here's my jsbin.
Additionally when I tried drawing some svgs inside the iframe with d3 they came out looking all weird and not scaling. After opening dev tools and editing the svg text as html I found that even adding a non-meaningful space anywhere would get it to redraw and render correctly. So bonus points if anyone can tell me any resources I can read up on cause clearly iframes don't work like I thought.
iframes need to be pointed at a page to load. you don't put html between iframe tags. if you put anything between iframe tags - it is text you want to display in the case the browser the client is using doesn't support the tag. you should make the html above its own local html page, and point the iframe src attribute above to point at that web page.
After a day of research:
Like Mike said, html inside an iframe is for the case the browser does not support iframes and will not show up otherwise. However, it IS absolutely possible to construct a document inside an iframe on the fly and without a server-side query. To do this, you have to use javascript to construct the document. You can get a reference to it and write html like so:
var iframe = document.getElementsByTagName('iframe')[0];
,doc = iframe.contentDocument || iframe.contentWindow.document
;
doc.open();
doc.write('<p>Some html</p>');
do.close();
Note that as Remy mentions here the document must be opened before writing and closed after.
Dolphin Browser and the Default Android Browser are reading the <noscript> section in the head of my page even though javascript is turned on in those browsers. This causes the content of those pages not to be rendered.
In the head I link to a a css stylesheet that sets display to none for anything inside a div on page when javascript is turned off in the browser. It does this by residing inside a nonscript element, so the stylesheet is only read if there is no javascript.
This works for all desktop/laptop browsers I tested (not tested on mac which I don't have access to). It works on Android with Firefox and Opera. I have cyanongenmod 7 only so no Google Chrome for me.
However when it comes to Dolphin and the default Android browsers, they read the css stylesheet that resides in the noscript section and pretty much the whole page/site is not rendered in these browsers.
I have proven that this is what is happening by deleting the stylesheet link from the head section and the page renders correctly in those browsers.
Is there some way to get these browsers to respect the noscript tags in the head section?
UPDATE: This is using HTML5 - noscript in the head is allowed: http://www.w3.org/TR/html5/the-noscript-element.html#the-noscript-element
<!DOCTYPE html>
<html>
<head>
<noscript>
<link href="${facesContext.externalContext.requestContextPath}/css/no_javascript.css" rel="stylesheet" type="text/css" />
<!-- this link is being read even if javascript in enabled in dolphin -->
</noscript>
</head>
<body>
<noscript>
stuff in this noscript element works correctly
</noscript>
<div class="no_javascript_disapear">
page full of stuff not being rendered because
dolphin browser is not respecting the noscript
tags in the head.
</div>
</body>
</html>
// css in the noscript tag:
.no_javascript_disapear {display:none;}
Maybe you can use javascript to remove that stylesheet?
Read this question for how to Access Contents of <noscript> with Javascript
Otherwise, you can add a title to your no-js stylesheet:
<link title="noJsStylesheet" href="....css" rel="stylesheet" type="text/css" />
And use this function to remove it:
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("title") == 'noJsStylesheet') a.disabled = true;
}
But i'm really not sure if it'll work on this specific Dolphin version.
According to HTML specifications issued as W3C recommendations, the noscript element is allowed inside body only. Browsers may allow it in the head too, but you can’t count on it. Just saying that you use HTML5 does not change this a bit; browsers do what they do, possibly implementing parts of HTML5 drafts at times.
The HTML5 draft generally recommends against using noscript at all: “The noscript element is a blunt instrument. Sometimes, scripts might be enabled, but for some reason the page's script might fail. For this reason, it's generally better to avoid using noscript, and to instead design the script to change the page from being a scriptless page to a scripted page on the fly” (followed by an example of this).
So the best approach would be progressive enhancements: Design the page first so that it works without scripting. Then, add scripting in a non-disruptive way. This could involve adding some CSS rules via scripting (which would be more natural than removing some).
But if you need a quick fix, you might consider adding, right after the link element that is now inside noscript, a script element that contains code for immediately removing that element from the document tree.
By the way, my good old Android 2.3.5 default browser seems to honor noscript inside head.
From Richard Kiessig's ultra fast asp.net book,
Head section can't contain any tags that cause the browser to draw content on the screen, users will see noting until it has downloaded all resources in the section.
-- What he is referring from this statement?
<HEAD runat ="server">
<title>WebForm1</title>
<h1> Hi </h1>
</HEAD>
Browser is rending 'hi'.
h1 inside head is invalid html. It is not allowed. But if producers of webbrowsers would reject every invalid html-document, about 90% (or even more) websites would not displayed to the user.
So one browser producer built a browser who was able to render invalid sites too, and all the user started to use this browser. So the producers of correct webbrowsers had no other chance. They also built browsers that can render invalid html. And because of this, all webbrowsers that are in use are browsers that are able to render invalid html.
BUT:
There is no standard defined on how to render invalid html. So each producer has his own ideas about how to display an invalid document, and so, when you write invalid html, you could have luck, and the document looks fine in the one browser you used for developing and testing. But the users of your website do not only use YOUR browser. They use ALL available browsers, and if your html-code is invalid, the chances are really high, that many users use a browser you dont know, and this browser don't display what you want, but some garbage.
Conclusio:
Producers of really good Web-Browsers MUST produce browsers that can render any garbage.
Producers of really good html-documents MUST procuce valid html.
The statement “Head section can't contain any tags that cause the browser to draw content on the screen, users will see noting until it has downloaded all resources in the section.” is best ignored; it just causes confusion and lacks a point. Trying to correct the mistakes in it would take long and would not really lead to anything.
Regarding the treatment of the invalid markup
<HEAD runat ="server">
<title>WebForm1</title>
<h1> Hi </h1>
</HEAD>
the simple answer is that browsers have parsers that imply a closing </head> tag and an opening <body> tag, when they encounter <h1> while parsing a head element. This is in full conformance with HTML specifications.
In the fragment, the only invalid thing, apart from the runat ="server" attribute, which is not expected to be delivered to clients at all (it’s ASP not HTML), is the spurious end tag </HEAD>. The head element was already closed, it cannot be closed again.
Yeah, sure the <head></head> can contain all tags that by default carry the display:none; property. Those are elements like <meta> and <title>. But <h1> has to render on the screen, it is display:inline;. Most elements aren't display:none; though, and should be placed in the <body></body> section.
At that point it won't validate with w3c therefore you're breaking web standards. However, it should render just fine in all modern browsers. Most people would say you want to retain organization and quality when building web pages, part of that is making sure your code is the correct syntax.
ETA: Standard HTML5 markup...
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
In that lt IE9 comment, it adds HTML5 support to IE 8 and below which do not support it. ;-)