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.
Related
I'm using below bootstrap CDN for css styles.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
They worked perfectly on plain HTML file and complete css applied, but when I send HTML file over outlook email, CSS styles didn't applied.
HTML file also includes DIV's.
From the below post, I can understand that Bootstrap CDN won't work for HTML sent via email.
bootstrap 4 css is not working with mail html template in flask
Then, how can I include the above bootstrap cdn css in my html file itself as inline.
Pls suggest.
Inline CSS is when you use the style attribute in HTML like this:
<h1 style="color:red;">My Title</h1>
So email only supports this sort of CSS. You cannot use any <link> tags to include external sources of CSS, and its generally not a good a good idea to do so.
If really want to you've got a couple of options.
Write it yourself
Try an "inliner" tool, such as these from Mailchimp and Campaign Monitor, or Premailer
you need to use inline styles, css won't work for you. at this point you should install bootstrap instead of importing it with the cdn
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.
I was really excited when I finally got my custom fonts working in a custom Mailchimp template.
I added the following to the head of the template:
<link rel="stylesheet" type="text/css" href="http://eberhardtsmith.com/d/wp-content/themes/blankslate/font-face/fonts.css">
That worked, until I use the template in a campaign, and everywhere shows the fallback font (Safari, Firefox, Mailbox for iPhone, Gmail tested).
Seems like the HTML isn't rendering the in the head of the template when it's in use. Anyone have any experience getting mailchimp to work?
You might need to choose a mail-safe font. Check out this blog post.
Emails are quite limited in what you can do in terms of styling.
Thanks to reccomendation from #j08691, I was able to get the fonts working using inline styles and not <link>.
However, the fonts only display on e-mail clients which support #font-face.
Otherwise, it uses fallback font.
TL;DR
I've read through many questions on Stack Overflow on this issue and I've tried to follow the given advice. Still, my CSS stylesheet will not work in Chrome/Safari but it can work in Internet Explorer.
The only odd thing that I can see about my scenario is my server is returning all files as of type application/octet-stream. I cannot change this aspect of the server. Is there something I can do to interpret my CSS file as a stylesheet in Chrome/Safari and IE?
I have an embedded web server project that I am working on. I have very limited control of the server software and the ability to make page-level settings. All I can do is create static HTML, CSS, and image files that are compiled into the server application.
As such, all files that are returned from the embedded server are declared as application/octet-stream in the HTTP header. This produces warnings in Chrome but no errors.
Initially, I had a problem loading this style sheet in Chrome/Safari but it would work in IE. After reading through a couple questions on Stack Overflow, I found that I needed to change my stylesheet declaration from:
<link rel="stylesheet" href="/styles/index.css">
to:
<link rel="stylesheet" type="text/css" href="/styles/index.css">
When I made this change Chrome & Safari still failed to process the CSS file but IE also started to ignore the stylesheet.
Oddly, if I do not declare a DOCTYPE on my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution.
My guess is this issue has something to do with the HTTP header declaration and that it doesn't match the type declared in the link element.
What can I do to get this stylesheet to work in Chrome, Safari, and IE while following good web development codes-of-practice (i.e. using doctypes on my HTML files and not embedding the style code in the HTML headers?)
For clarity sake, the relevant CSS/HTML code is shown below.
index.css
html {height:100%}
body {margin:0;min-height:100%;position:relative}
iframe {width:100%;height:100%;border:none}
.hdr {min-width:765px;overflow:auto}
.logo1 {float:left;margin:4px}
.logo2 {float:right;margin:4px}
.menu {position:absolute;top:70px;left:0px;bottom:0px;width:175px}
.content {position:absolute;top:70px;left:175px;bottom:0px;right:0px;}
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that this would at least work in IE9 //-->
</head>
<body lang="en-us">
<div class="hdr"><img class="logo1" src="/images/logo1.png" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>
FYI, this is a new project that is being developed from an existing one. The original project did not declare a DOCTYPE on the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the index.htm originally consisted of multiple frames within a frameset.
I am trying to update this application, using correct, and up to date methods for developing web pages. I can make this application work, but I feel that this would be at a sacrifice of future-browser compatibility if I have to rely on browser quirks mode and framesets.
I have tried to close the link tag but that doesn't help. Technically, this shouldn't be an issue since this document is declared as an HTML5 document, rather than XHTML.
It's certainly due to the application/octet-stream content type. I can re-create the issue on my end. Soon as the content type is set to text/css your HTML/CSS load fine.
As a workaround you can use <style> tags for you CSS if you can't get the server to send the correct content type.
I hate to have to answer my own question this way but the problem was most certainly with the fact that the server was returning a content type of application/octet-stream within the HTTP header.
After discussing the issue with management we had to update the code associated with the HTTP processor. This is code that is part of a third-party RTOS and we have been extremely hesitant to making any changes to this code.
However, in this case the need has out-weighed that desire. I've integrated the necessary changes to fix the HTTP header to return a content type of "text/css" for cascading style sheets. All is now right with the world.
I think I'll just chime in here. Not to answer the question, but to confirm the issue and perhaps help people with similar problems.
I had the same problem: an external css file was loaded alright, but it was not applied in Chrome. (Safari and FF were ok about it). So, same problem, slightly different cause.
It turned out that because of a bug in the webserver code the HTTP response contained two Content Types, 'text/html' and 'text/css'.
The solution was to remove the faulty 'text/html' line. It seems Chrome is pickier than other browsers about response headers. Which I suppose is legitimate, but a warning would have been nice.
btw, you can see all the http information for a loaded resource in Chrome, when you open Developer Tools, and select Network. Then click on the file that you want to investigate. (it took me a while to find that)
We had a problems with an iframe wich it's contents was updated by an external javascript routine, the CSS were loaded but were not applied. But updating the body HTML from a routine present in the iframe head worked as suposed to.
This same behaviour was not present in gecko and explorer, but happened the same at Safari browser (webkit)
Hope this could give some light in this curious case.
I would like to add one bit of information that may save some of you some time. It appeared that chrome was not recognizing my CSS either. After reading the above post I reviewed the files in the Developer Tools->Network. Turns out that Chrome was using a locally cached version of my CSS. As soon as I refreshed as opposed to accessing the URL again, it worked!
I'm no expert, but i've made this mistake before, it's rather simple.
You've written:
<link rel="stylesheet" href="/styles/index.css">
If this is a folder in the same directory as your index.html file, then you need to remove the first /. like so:
<link rel="stylesheet" href="styles/index.css">
EDIT: I think someone else mentioned this already, but it may have been overlooked.
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.