神刀安全网

Quick Tip: Make AMP’s Inline CSS Easier With Jade or PHP

TheAMP Project provides a relatively hands-free way to implement several different types of web page optimization. You can read our complete rundown of exactly what the project is and what it does in AMP Project: Will it Make Your Sites Faster? .

To summarize how AMP is implemented, you will:

  1. Start with some standard boilerplate code that loads in the required JavaScript
  2. Use some custom HTML elements
  3. Follow some best practice rules

Once you’ve done the above three things the rest of the optimization process is handled for you behind the scenes. Additionally, AMP pages must pass a validation test, and in order to pass this test all of its best practice rules must be adhered to.

One of AMP’s rules can be a little unwieldy during development however, and that is the requirement that all custom CSS be loaded inline in the head section between a set of <style amp-custom>...</style> tags.

If you manually write your CSS directly into your pages’ head sections you’ll face problems and limitations. Should you need to change the CSS on multiple site pages it will be laborious, and you won’t have the option to use CSS enhancement tools like preprocessors or minifiers.

For this reason, if you see yourself making more than one AMP template you’ll want to find a way to write your CSS in an external stylesheet so your usual workflow is maintained, but still pass AMP validation by moving all your CSS into the head section after the fact.

In this quick tip, you’ll learn two ways you can do just that.

Method 1: With Jade

Jade is a language you can think of as much like a preprocessor for HTML. It allows you to write HTML in a terse, shorthand form which compiles into regular HTML, but most importantly for the subject at hand it also allows you to import CSS files and have their full content output anywhere you like.

In this method, you’ll write your AMP templates using Jade syntax, and import an external CSS file into the head section of each of your templates. This is one of the best methods you can use to create AMP pages if you need to output static HTML. Here’s how to go about it.

Create an External Stylesheet

The first thing you’ll need to do is setup the external stylesheet you want to import into your AMP templates. Create a folder to house your project, then inside it create a new stylesheet and name it “style.css”.

Add some basic CSS to your stylesheet, anything of your choosing as long as your file remains no greater 50kb in size, in adherence with AMP’s validation rules .

If you just want some test CSS to get you started, add the following:

body { background: #3498db; color: #fff }

Jade AMP Boilerplate with CSS Import

The next step is to add in AMP’s boilerplate code , but with two significant differences. One, we’ll be using Jade syntax instead of straight HTML, and two, we’ll be importing our external “style.css” file.

Create a new file in your project folder named “index.jade” and add the following code to it:

doctype html(amp, lang="en")   head     meta(charset="utf-8")     title AMP via Jade     link(rel="canonical", href="/index.html")     meta(name="viewport", content="width=device-width,minimum-scale=1,initial-scale=1")     script(type="application/ld+json").       {         "@context": "http://schema.org",         "@type": "NewsArticle",         "headline": "Open-source framework for publishing content",         "datePublished": "2015-10-07T12:02:41Z",         "image": [           "logo.jpg"         ]       }     |      |<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>     script(async, src="https://cdn.ampproject.org/v0.js")     style(amp-custom)       include style.css   body     h1 This is a Jade based AMP page.

The above code is the same as you’ll find in the AMP docs , just converted into Jade syntax.

You’ll notice towards the bottom of this code we have:

style(amp-custom)    include style.css

The line reading style(amp-custom) will output the required <style amp-custom>...</style> tags. Indented on the following line you’ll see include style.css . This leverages Jade’s includes functionality , and will import all the content of your “style.css” file and output it in between the style tags.

Jade Compilation with Prepros

You’ve now setup all the required code for this method, and you just need to compile your Jade template. You can do this either through a task runner like Gulp or  Grunt , or through a compilation app.

For relatively straight forward projects where you just want to get files compiled, I recommend using an app called Prepros . You’ll only need the free/trial version for the purpose of this method.

Once you’ve installed and run Prepros, all you have to do is drag your project folder onto its interface and it will find your Jade file. It will automatically start watching your project for changes, so just save either your Jade or CSS file and that will trigger Prepros to compile your template.

Quick Tip: Make AMP’s Inline CSS Easier With Jade or PHP

You should now see a new file appear in your project named “index.html”, and inside it you should see your compiled HTML boilerplate code complete with inline custom CSS:

<!DOCTYPE html> <html amp lang="en">   <head>     <meta charset="utf-8">     <title>AMP via Jade</title>     <link rel="canonical" href="/index.html">     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">     <script type="application/ld+json">       {         "@context": "http://schema.org",         "@type": "NewsArticle",         "headline": "Open-source framework for publishing content",         "datePublished": "2015-10-07T12:02:41Z",         "image": [           "logo.jpg"         ]       }     </script>      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>     <script async src="https://cdn.ampproject.org/v0.js"></script>     <style amp-custom>body { background: #3498db; color: #fff }     </style>   </head>   <body>     <h1>This is a Jade based AMP page.</h1>   </body> </html>

Site Preview with MAMP

The next thing you’re going to want to do is check out a preview of your site. While it’s possible to just view your AMP file in a browser loaded straight from your hard drive, it’s good practice to preview your sites with a localhost, i.e. to simulate a web host on your computer.

Prepros does come with an included localhost preview which auto refreshes when changes are made in your project. However, you won’t be able to use it with AMP (unfortunately). The reason being Prepros loads some JavaScript into its preview to enable live reload, but due to the fact no custom JavaScript is allowed in AMP pages the validator will detect this script and then throw an error.

For this reason, the approach I recommend is to setup your site preview localhost using MAMP for Mac or Windows. You’ll follow the same process we went through above, the only difference being you’ll create your project folder inside your MAMP “htdocs” folder before dragging it onto your Prepros interface. When MAMP is running, this will enable you to preview it at a URL like  http://localhost:8888/myproject .

Quick Tip: Make AMP’s Inline CSS Easier With Jade or PHP

With this approach you get the best of both worlds: a localhost preview without validation errors via MAMP, and automatic Jade compilation via Prepros.

Method 2: With PHP

If you don’t need to generate static HTML templates you have the option of using PHP to dynamically output your stylesheet in your head section. This approach probably requires a little less fuss, but is only appropriate if your project requirements (and your host) allow for PHP.

Incidentally, even if you’ve never used PHP before and just want to write in straight HTML rather than using Jade syntax, you can still use this technique.

Start by creating an index file with the standard AMP boilerplate code added to it, but instead of naming the file “index.html” name it “index.php”:

<!doctype html> <html amp lang="en">   <head>     <meta charset="utf-8">     <title>Hello, AMPs</title>     <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">     <script type="application/ld+json">       {         "@context": "http://schema.org",         "@type": "NewsArticle",         "headline": "Open-source framework for publishing content",         "datePublished": "2015-10-07T12:02:41Z",         "image": [           "logo.jpg"         ]       }     </script>     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>     <script async src="https://cdn.ampproject.org/v0.js"></script>   </head>   <body>     <h1>Welcome to the mobile web</h1>   </body> </html>

If you’ve already been working on an AMP template you can also just rename the file, changing the extension to “.php”, thereby converting it into a PHP file. For example, “about.htm” would be renamed to “about.php”. (Just make sure you change the extension on any internal links too.)

Now, create an external stylesheet named “style.css” in your root folder. If you have a template you’re already working on, cut any CSS you currently have in between your <style amp-custom>...</style> tags and paste it into your external stylesheet.

To pull your external CSS into your AMP file’s head section, just paste this one line PHP snippet in between the <style amp-custom>...</style> tags:

<?php readfile( getcwd() . "/style.css"); ?>

Breakdown

If you’re not particularly interested in PHP you can leave it at that, knowing the snippet will allow PHP to fetch your stylesheet from the server, read its contents, then output it inline. However if you’d like to know more about the snippet, let’s break it down.

First, we have the opening and closing PHP tags <?php ... ?> . These let the server know that what’s between these tags is PHP and not regular HTML.

Then we are using the function readfile() . This function looks at the file specified between the brackets, fetches it from the server, reads its contents then outputs that content inline.

In between the brackets we have the function getcwd() . This function gets the path to the current working directory, i.e. the directory our PHP file is in.

After that we have the string (normal text) “/style.css” which specifies the name of our stylesheet, relative to the location of our PHP file. Then in between this string and the getcwd() function we place a dot  . which concatenates (connects) the two together to create the full path to our stylesheet. For example, in a MAMP preview the path would be something like “/Applications/MAMP/htdocs/myproject/style.css”.

You can use this snippet in as many of your PHP templates as you need, and any changes to your external stylesheet will be output across all your templates.

Site Preview with MAMP

As with the Jade method, a great way of previewing your PHP based AMP pages is using MAMP, which has full support for PHP. Install MAMP and create your project folder inside its “htdocs” folder and you’ll be able to preview your site at a URL like http://localhost:8888/myproject without any additional setup.

Wrapping Up

We’ve now covered two ways you can keep your external stylesheet and normal CSS development workflow, but still pass your AMP validation by moving your CSS inline. Let’s quickly summarize each one.

  • Method 1: Jade
    Write your templates in Jade syntax and use include to output an external stylesheet in the head section. Compile with Prepros and preview with MAMP.
  • Method 2: PHP
    Write your template in HTML syntax inside files with the extension “.php”. Include a PHP snippet to output your external stylesheet in the head section. Preview with MAMP.

As for which method to choose, it will depend on the specifics of your project, but generally speaking:

  • If you’re working on a static site and you either use Jade or are interested in learning, method one is your best approach.
  • If your site will (or can) be dynamic with access to PHP, or you’re not interested in using Jade, method two’s little snippet is a quick and easy solution.

With either of these methods you can develop CSS in the way you’re used to, with changes instantly reflected across all templates and access to preprocessors & optimization tools, while still inlining your CSS in an AMP compliant way.

I hope that helps to make your AMP development processes a little smoother!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Quick Tip: Make AMP’s Inline CSS Easier With Jade or PHP

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮