This is page 13 of 24. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/content/learn/how-amp-works@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Como o AMP acelera o desempenho
3 | ---
4 | [TOC]
5 |
6 | Combinadas, as otimizações a seguir são a razão das páginas AMP serem tão rápidas que parecem carregar instantaneamente:
7 |
8 | Se você prefere ouvir em vez de ler, este vídeo feito pelo engenheiro-chefe em AMP, Malte Ubl, passa uma visão geral semelhante aos próximos parágrafos.
9 |
10 | <amp-youtube
11 | data-videoid="hVRkG1CQScA"
12 | layout="responsive"
13 | width="480" height="270">
14 | </amp-youtube>
15 |
16 | ## Permitir apenas scripts assíncronos
17 |
18 | O JavaScript é uma ferramenta eficaz,
19 | que pode modificar praticamente todos os aspectos da página,
20 | mas também pode bloquear uma construção em DOM e atrasar a renderização da página
21 | (veja também [Adicionar interatividade com o JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
22 | Para evitar que o JavaScript atrase a renderização da página,
23 | o AMP permite apenas o JavaScript assíncrono.
24 |
25 | Páginas AMP não podem incluir JavaScript escrito pelo autor.
26 | Em vez de usar JavaScript,
27 | os recursos interativos da página são processados em elementos AMP personalizados.
28 | Os elementos AMP personalizados podem incluir JavaScript,
29 | mas são projetados cuidadosamente para garantir que não atrapalhem o desempenho.
30 |
31 | Embora JS de terceiros seja permitido nos iframes,
32 | ele não pode bloquear a renderização.
33 | Por exemplo, se o JS de terceiros usar a
34 | [API `document.write` muito prejudicial para o desempenho](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
35 | ela não bloqueará a renderização da página principal.
36 |
37 | ## Dimensionar todos os recursos estaticamente
38 |
39 | Recursos externos, como imagens, anúncios ou iframes, devem informar seu tamanho no HTML
40 | para que o AMP possa determinar o tamanho e a posição de cada elemento antes de que seja feito o download dos recursos.
41 | O AMP carrega o layout da página sem esperar que seja feito o download dos recursos.
42 |
43 | O AMP separa o layout do documento do layout do recurso.
44 | Apenas uma solicitação HTTP é necessária para se ter o layout do documento inteiro
45 | ([+fontes](#font-triggering-must-be-efficient)).
46 | Como o AMP é otimizado para evitar recálculos de estilo e layouts pesados no navegador,
47 | o layout não será recriado quando os recursos forem carregados.
48 |
49 | ## Não permitir que mecanismos de extensões bloqueiem a renderização
50 |
51 | O AMP não permite que mecanismos de extensões bloqueiem a renderização da página.
52 | O AMP oferece suporte a extensões para itens como
53 | [efeitos Lightbox](/docs/reference/extended/amp-lightbox.html),
54 | [incorporações do Instagram](/docs/reference/extended/amp-instagram.html),
55 | [tweets](/docs/reference/extended/amp-twitter.html) etc.
56 | Embora eles precisem de solicitações HTTP adicionais,
57 | essas solicitações não bloqueiam o layout e a renderização da página.
58 |
59 | Qualquer página que use um script personalizado deve informar ao sistema AMP
60 | que ela futuramente terá uma tag personalizada.
61 | Por exemplo, o script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
62 | informa ao sistema que haverá uma tag `amp-iframe`.
63 | O AMP cria a caixa de iframe antes mesmo de saber o que ela incluirá:
64 |
65 | [sourcecode:html]
66 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
67 | [/sourcecode]
68 |
69 | ## Remover qualquer JavaScript de terceiros do caminho essencial
70 |
71 | JS de terceiros costuma usar o carregamento síncrono de JS.
72 | Eles também gostam de `document.write` mais scripts síncronos.
73 | Por exemplo, se tiver cinco anúncios e cada um realizar três carregamentos de sincronização
74 | em uma conexão com 1 segundo de latência,
75 | você terá 15 segundos de carregamento apenas para carregar o JS.
76 |
77 | As páginas AMP permitem o uso de JavaScript de terceiros, mas apenas em iframes com sandbox.
78 | Ao serem restritos a iframes, eles não podem bloquear a execução da página principal.
79 | Mesmo que façam com que o estilo seja recalculado várias vezes,
80 | seus iframes pequenos contêm muito pouco DOM.
81 |
82 | Recálculos de estilos e layouts são típicos para o tamanho de DOM,
83 | então os recálculos de iframe são muito rápidos em comparação
84 | a um recálculo de estilos e layout para a página.
85 |
86 | ## Qualquer CSS deve ser inline e de tamanho limitado
87 |
88 | O CSS bloqueia toda a renderização, bloqueia o carregamento da página e costuma ser excessivo.
89 | Nas páginas AMP HTML, apenas estilos inline são permitidos.
90 | Isso remove uma ou até mais solicitações HTTP do caminho essencial de renderização
91 | em comparação com a maioria das páginas da Web.
92 |
93 | Além disso, a folha de estilo inline deve ter um tamanho máximo de 50 kilobytes.
94 | Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas,
95 | ele ainda exige que o autor da página otimize o CSS.
96 |
97 | ## O acionamento de fontes deve ser eficiente
98 |
99 | As fontes da Web são muito grandes, então uma
100 | [otimização de fontes da Web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
101 | é essencial para o desempenho.
102 | Em uma página comum, com poucos scripts de sincronização e poucas folhas de estilo externas,
103 | o navegador fica esperando para começar a fazer o download dessas fontes enormes até que tudo isso aconteça.
104 |
105 | O sistema AMP declara zero solicitação HTTP até que comece o download das fontes.
106 | Isso só é possível porque todo JS em AMP tem o atributo de sincronização
107 | e apenas folhas de estilo inline são permitidas;
108 | nenhuma solicitação HTTP impede que o navegador faça o download das fontes.
109 |
110 | ## Minimizar os recálculos de estilo
111 |
112 | Cada vez que você mede algo, recálculos de estilo são acionados, o que é pesado,
113 | pois o navegador precisa refazer o layout da página inteira.
114 | Nas páginas AMP, todas as leituras de DOM são realizadas primeiro, antes de todas as gravações.
115 | Isso garante que ocorra, no máximo, um recálculo de estilos por frame.
116 |
117 | Saiba mais sobre o impacto dos recálculos de estilo e layout em
118 | [desempenho de renderização](https://developers.google.com/web/fundamentals/performance/rendering/).
119 |
120 | ## Executar apenas animações aceleradas por GPU
121 |
122 | A única maneira de ter otimizações rápidas é executá-las na GPU.
123 | A GPU entende camadas, sabe como realizar atividades nessas camadas,
124 | pode movê-las, pode desvanecê-las, mas não pode atualizar o layout da página;
125 | ela passa essa tarefa para o navegador e isso não é bom.
126 |
127 | As regras para CSS relacionado a animações garantem que as animações possam ser aceleradas pela GPU.
128 | Especificamente, o AMP permite animação e transição apenas em transform e opacity
129 | para que o layout da página não seja necessário.
130 | Saiba mais sobre como
131 | [usar transform e opacity em alterações de animação](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
132 |
133 | ## Priorizar o carregamento de recursos
134 |
135 | O AMP controla todos os downloads de recursos: ele prioriza o carregamento de recursos,
136 | carregando apenas o necessário, e realiza a pré-busca de recursos de carregamento lento.
137 |
138 | Quando o AMP baixa recursos, ele otimiza os downloads
139 | para que se faça primeiro o download dos recursos mais importantes no momento.
140 | Somente é feito o download de imagens e anúncios quando forem ser vistos pelo usuário,
141 | vistos acima da dobra ou se for provável que o usuário chegue a eles rapidamente.
142 |
143 | O AMP também realiza a pré-busca de recursos de carregamento lento.
144 | Os recursos são carregados o mais tarde possível, mas a pré-busca é feita assim que possível.
145 | Dessa forma, tudo é carregado muito rapidamente, mas a CPU só é usada
146 | quando os recursos são exibidos aos usuários.
147 |
148 | ## Carregar páginas em um instante
149 |
150 | A nova [preconnect API](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
151 | é muito usada para garantir que as solicitações HTTP sejam tão rápidas quanto possível ao serem feitas.
152 | Assim,
153 | uma página pode ser renderizada antes de o usuário informar explicitamente que deseja navegar até ela;
154 | a página pode já estar disponível quando o usuário a selecionar,
155 | fazendo com que o carregamento seja instantâneo.
156 |
157 | Embora a pré-renderização possa ser aplicada a todo o conteúdo Web,
158 | ela também pode usar muita largura de banda e recursos de CPU. O AMP é otimizado para reduzir esses fatores. A pré-renderização somente faz o download dos recursos acima da dobra
159 | e não renderiza itens que possam ser pesados em termos de uso de CPU.
160 |
161 | Quando documentos AMP são pré-renderizados para carregamento instantâneo,
162 | somente é feito o download dos recursos acima da dobra.
163 | Quando documentos AMP são pré-renderizados para carregamento instantâneo,
164 | não é feito o download de recursos que podem usar muitos recursos de CPU (como iframes de terceiros).
165 |
166 | Saiba mais sobre
167 | [por que o AMP HTML não aproveita ao máximo o scanner de pré-carregamento](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
168 |
169 | ## Ajude a tornar o AMP mais rápido
170 | AMP é um esforço de código aberto.
171 | Precisamos da sua ajuda para deixá-lo ainda mais rápido.
172 | Saiba [como contribuir](/docs/support/contribute.html).
173 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/style_pages@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: CSS compatível
3 | ---
4 |
5 | Como todas as páginas da Web, as páginas AMP são estilizadas com CSS,
6 | mas não é possível fazer referência a folhas de estilo externas
7 | (com exceção de [fontes personalizadas](#the-custom-fonts-exception)).
8 | Além disso, certos estilos não são permitidos devido a implicações de desempenho.
9 | Os atributos de estilo in-line não são permitidos.
10 |
11 | Todos os estilos devem estar no cabeçalho do documento
12 | (leia [Adicionar estilos a uma página](/docs/guides/validate.html#add-styles-to-a-page)).
13 | Contudo, você pode usar pré-processadores e modelos CSS para criar páginas estáticas
14 | e gerenciar melhor seu conteúdo.
15 |
16 | **Observação:**
17 | Os componentes da AMP vêm com estilos padrão
18 | para tornar razoavelmente fácil a criação das páginas responsivas.
19 | Esses estilos estão definidos na [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
20 |
21 | [TOC]
22 |
23 | ## Uso de pré-processadores CSS
24 |
25 | O resultado gerado pelos pré-processadores funciona na AMP tão bem como em qualquer outra página da Web.
26 | Por exemplo, o site [ampproject.org](https://www.ampproject.org/) usa
27 | [Sass](http://sass-lang.com/).
28 | Nós usamos <a href="http://grow.io/">Grow</a> para criar as páginas AMP estáticas
29 | que compõem o site [ampproject.org](https://www.ampproject.org/).
30 |
31 | Ao usar os pré-processadores,
32 | dê atenção especial ao que será incluído: carregue apenas o que as suas páginas usam.
33 | Por exemplo, [head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html)
34 | inclui toda a marcação de AMP necessária e a CSS in-line dos arquivos de origem `*.scss`.
35 | Ele também inclui o script do elemento personalizado para
36 | [`amp-youtube`](/docs/reference/extended/amp-youtube.html), entre outros,
37 | de modo que muitas páginas em todo o site podem incluir vídeos incorporados do YouTube.
38 |
39 | [sourcecode:html] {% raw %}
40 | <head>
41 | <meta charset="utf-8">
42 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
43 | <meta content="IE=Edge" http-equiv="X-UA-Compatible">
44 | <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
45 | <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
46 |
47 | <title>Accelerated Mobile Pages Project</title>
48 | <link rel="shortcut icon" href="/static/img/amp_favicon.png">
49 | <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
50 | <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
51 | <style amp-custom>
52 | {% include "/assets/css/main.min.css" %}
53 | </style>
54 |
55 | <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>
56 | <script async src="https://cdn.ampproject.org/v0.js"></script>
57 | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
58 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
59 | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
60 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
61 | <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
62 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
63 | </head>
64 | {% endraw %} [/sourcecode]
65 |
66 | Para ver como o conteúdo acima se traduz em um HTML de AMP formatado,
67 | veja o código-fonte de qualquer página em [ampproject.org](https://www.ampproject.org/).
68 | No Google Chrome, clique com o botão direito e selecione `Exibir código-fonte da página`.
69 |
70 | ## Estilos não permitidos
71 |
72 | Os seguintes estilos não são permitidos em páginas AMP:
73 |
74 | <table>
75 | <thead>
76 | <tr>
77 | <th data-th="Banned style">Estilo proibido</th>
78 | <th data-th="Description">Descrição</th>
79 | </tr>
80 | </thead>
81 | <tbody>
82 | <tr>
83 | <td data-th="Banned style">Atributos de estilo in-line</td>
84 | <td data-th="Description">Todos os estilos devem ser definidos no <code><head></code> da página,
85 | dentro de uma tag <code><style amp-custom></code>.</td>
86 | </tr>
87 | <tr>
88 | <td data-th="Banned style"><code>!</code>qualificador importante </td>
89 | <td data-th="Description">Uso não permitido.
90 | Este é um requisito necessário para permitir que a AMP coloque em vigor suas regras de dimensionamento de elementos.</td>
91 | </tr>
92 | <tr>
93 | <td data-th="Banned style"><code><link rel=”stylesheet”></code></td>
94 | <td data-th="Description">Não permitido, com exceção de <a href="#the-custom-fonts-exception">fontes personalizadas</a>.</td>
95 | </tr>
96 | <tr>
97 | <td data-th="Banned style"><code>*</code> (seletor universal)</td>
98 | <td data-th="Description">Implicações de desempenho negativo e poderia ser usado
99 | para violar outras restrições de seletor.</td>
100 | </tr>
101 | <tr>
102 | <td data-th="Banned style"><code>:not()</code></td>
103 | <td data-th="Description">Poderia ser usado para simular o seletor universal.</td>
104 | </tr>
105 | <tr>
106 | <td data-th="Banned style">Pseudosseletores, pseudoclasses e pseudoelementos</td>
107 | <td data-th="Description">Pseudosseletores, pseudoclasses e pseudoelementos só são permitidos
108 | em seletores que contêm nomes de tags. Esses nomes de tags não podem iniciar com <code>amp-</code>.
109 | Exemplo correto: <code>a:hover, div:last-of-type</code>
110 | Exemplo incorreto: <code>amp-img:hover, amp-img:last-of-type</code></td>
111 | </tr>
112 | <tr>
113 | <td data-th="Banned style">Classe <code>-amp-</code> e nomes de tags com <code>i-amp-</code></td>
114 | <td data-th="Description">Os nomes de classe, nas folhas de estilo de criação, podem não começar com a string <code>-amp-</code>. Estes são reservados para uso interno no tempo de execução da AMP. A folha de estilo do usuário pode não fazer referência a seletores de CSS para classes <code>-amp-</code> e tags <code>i-amp</code>.</td>
115 | </tr>
116 | <tr>
117 | <td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
118 | <td data-th="Description">Estas propriedades não são permitidas
119 | por razões de segurança.</td>
120 | </tr>
121 | <tr>
122 | <td data-th="Banned style"><code>filter</code></td>
123 | <td data-th="Description">O elemento é adicionado à lista negra devido a preocupações de desempenho.</td>
124 | </tr>
125 | </tbody>
126 | </table>
127 |
128 | ## Propriedades de transição e animação na lista de permissões
129 |
130 | A AMP só permite transições e animações de propriedades
131 | que podem ser aceleradas por GPU em navegadores comuns.
132 | No momento, a lista de permissões do projeto de AMP inclui `opacity`, `transform`
133 | e `-vendorPrefix-transform`.
134 |
135 | Nos exemplos a seguir, `<property>` precisa estar na lista de permissões.
136 |
137 | * `transition <property> (Also -vendorPrefix-transition)`
138 | * @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
139 |
140 | A propriedade `overflow` (incluindo `overflow-y` e `overflow-x`)
141 | não pode ser estilizada como “auto” nem “scroll”.
142 | Nenhum elemento definido pelo usuário em um documento de AMP pode ter uma barra de rolagem.
143 |
144 | ## A exceção das fontes personalizadas
145 |
146 | As páginas AMP não podem incluir folhas de estilo externas, com exceção de fontes personalizadas.
147 | Os dois métodos compatíveis para a referência a fontes personalizadas são
148 | as tags de links que levam a fornecedores de fontes na lista de permissões e a inclusão de `@font-face`.
149 |
150 | Os fornecedores de fontes só serão colocados na lista de permissões
151 | se oferecerem suporte a integrações "somente CSS" e veicularem por HTTPS.
152 | Atualmente, apenas estas origens estão na lista de permissões
153 | e podem veicular fontes via tags de link:
154 |
155 | * [https://fast.fonts.net](https://fast.fonts.net)
156 | * [https://fonts.googleapis.com](https://fonts.googleapis.com)
157 |
158 | Exemplo de tag de link que leva ao fornecedor de fontes na lista de permissões, o Google Fonts:
159 |
160 | [sourcecode:html]
161 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
162 | [/sourcecode]
163 |
164 | Como alternativa, use [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).
165 | As fontes incluídas via `@font-face` devem ser buscadas
166 | por meio do esquema HTTP ou HTTPS.
167 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Desteklenen CSS
3 | ---
4 |
5 |
6 | Tüm web sayfaları gibi AMP sayfalarının stili de CSS ile belirlenir, ancak ([özel yazı tipleri](#the-custom-fonts-exception) haricinde) harici stil sayfalarını referans alamazsınız.
7 | Ayrıca, performans üzerindeki etkilerinden dolayı belirli stillere izin verilmez; satır içi stil özniteliklerine izin verilmemektedir.
8 |
9 | Tüm stiller, dokümanın head bölümünde yer almalıdır (bkz. [Sayfaya stil ekleme](/docs/guides/validate.html#add-styles-to-a-page)).
10 | Ancak, içeriğinizi daha iyi yönetmek amacıyla statik sayfalar oluşturmak için CSS ön işlemcilerini ve şablonlarını kullanabilirsiniz.
11 |
12 | **Not:** Duyarlı sayfaları yazmayı makul bir düzeyde kolaylaştırmak için AMP bileşenleri varsayılan stillerle birlikte gelir.
13 | Bu stiller, [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css) içinde tanımlanır.
14 |
15 | [TOC]
16 |
17 | ## CSS ön işlemcilerini kullanma
18 |
19 | Ön işlemcilerin oluşturduğu çıktı, diğer web sayfalarında olduğu gibi AMP'de sorunsuz bir şekilde çalışır.
20 | Örneğin, [ampproject.org](https://www.ampproject.org/) sitesi [Sass](http://sass-lang.com/)'ı kullanır.
21 | ([ampproject.org](https://www.ampproject.org/) sitesini meydana getiren statik AMP sayfalarını oluşturmak için biz <a href="http://grow.io/"><span class="notranslate">Grow</span></a> kullanıyoruz.)
22 |
23 | Ön işlemcileri kullanırken neleri eklediğinize ayrıca dikkat etmeniz gerekir; yalnızca sayfalarınızın kullandığı öğeleri ekleyin.
24 | Örneğin, [head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html) kodu gerekli tüm AMP biçimlendirmesini ve `*.scss` kaynak dosyalarındaki satır içi CSS'yi içerir.
25 | Diğerlerinin yanı sıra [`amp-youtube`](/docs/reference/extended/amp-youtube.html) için özel öğe komut dosyasını da içerir. Böylece, sitedeki birçok sayfaya yerleşik YouTube videoları eklenebilir.
26 |
27 | [sourcecode:html] {% raw %}
28 | <head>
29 | <meta charset="utf-8">
30 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
31 | <meta content="IE=Edge" http-equiv="X-UA-Compatible">
32 | <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
33 | <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
34 |
35 | <title>Accelerated Mobile Pages Project</title>
36 | <link rel="shortcut icon" href="/static/img/amp_favicon.png">
37 | <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
38 | <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
39 | <style amp-custom>
40 | {% include "/assets/css/main.min.css" %}
41 | </style>
42 |
43 | <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>
44 | <script async src="https://cdn.ampproject.org/v0.js"></script>
45 | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
46 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
47 | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
48 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
49 | <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
50 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
51 | </head>
52 | {% endraw %} [/sourcecode]
53 |
54 | Yukarıdaki kodun biçimlendirilmiş AMP HTML'sine nasıl çevrildiğini görmek için [ampproject.org](https://www.ampproject.org/)'daki herhangi bir sayfanın kaynağını görüntüleyin.
55 | (Chrome'da sağ tıklayın ve `Sayfa Kaynağını Görüntüle`'yi seçin.)
56 |
57 | ## İzin verilmeyen stiller
58 |
59 | Aşağıdaki stillere AMP sayfalarında izin verilmez:
60 |
61 | <table>
62 | <thead>
63 | <tr>
64 | <th data-th="Banned style">Yasaklanan stil</th>
65 | <th data-th="Description">Açıklama</th>
66 | </tr>
67 | </thead>
68 | <tbody>
69 | <tr>
70 | <td data-th="Banned style">Satır içi stil öznitelikleri</td>
71 | <td data-th="Description">Tüm stiller sayfanın <code><head></code> öğesinde, bir <code><style amp-custom></code> etiketinin içinde tanımlanmalıdır.</td>
72 | </tr>
73 | <tr>
74 | <td data-th="Banned style"><code>!</code>önemli niteleyici </td>
75 | <td data-th="Description">Kullanımına izin verilmez.
76 | Bu, AMP'nin öğe boyutlandırma kurallarını uygulamasını sağlama açısından önemli bir gereksinimdir.</td>
77 | </tr>
78 | <tr>
79 | <td data-th="Banned style"><code><link rel=”stylesheet”></code></td>
80 | <td data-th="Description"><a href="#the-custom-fonts-exception">Özel yazı tipleri</a> istisnasıyla izin verilmez.</td>
81 | </tr>
82 | <tr>
83 | <td data-th="Banned style"><code>*</code> (evrensel seçici)</td>
84 | <td data-th="Description">Negatif performans etkileri vardır ve diğer seçici kısıtlamalarını aşmak için kullanılabilir.</td>
85 | </tr>
86 | <tr>
87 | <td data-th="Banned style"><code>:not()</code></td>
88 | <td data-th="Description">Evrensel seçiciyi simüle etmek için kullanılabilir.</td>
89 | </tr>
90 | <tr>
91 | <td data-th="Banned style">Sözde seçiciler, sözde sınıflar ve sözde öğeler</td>
92 | <td data-th="Description">Sözde seçicilere, sözde sınıflara ve sözde öğelere yalnızca <code>amp-</code> ile başlamayan etiket adları içeren seçicilerde izin verilir.
93 | Doğru kullanım örneği: <code>a:hover, div:last-of-type</code> Yanlış kullanım örneği: <code>amp-img:hover, amp-img:last-of-type</code></td>
94 | </tr>
95 | <tr>
96 | <td data-th="Banned style"><code>-amp-</code> sınıfı ve <code>i-amp-</code> etiket adları</td>
97 | <td data-th="Description">Yazar stil sayfalarındaki sınıf adları, <code>-amp-</code> dizesiyle başlayamaz. Bunlar, AMP çalışma zamanı tarafından dahili kullanım için ayrılmıştır. Kullanıcı stil sayfasının <code>-amp-</code> sınıflarına ve <code>i-amp</code> etiketlerine ilişkin CSS seçicilerini referans alamayacağı kuralına uyar.</td>
98 | </tr>
99 | <tr>
100 | <td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
101 | <td data-th="Description">Bu özelliklere güvenlik nedeniyle izin verilmez.</td>
102 | </tr>
103 | <tr>
104 | <td data-th="Banned style"><code>filter</code></td>
105 | <td data-th="Description">Performansla ilgili kaygılardan dolayı kara listeye alınmıştır.</td>
106 | </tr>
107 | </tbody>
108 | </table>
109 |
110 | ## Beyaz listedeki geçiş ve animasyon özellikleri
111 |
112 | AMP yalnızca yaygın kullanılan tarayıcılarda GPU hızlandırmalı olabilecek geçiş ve animasyon özelliklerine izin verir.
113 | AMP projesi şu anda `opacity`, `transform` ve `-vendorPrefix-transform` özelliklerini beyaz listeye almıştır.
114 |
115 | Aşağıdaki örneklerde, `<property>` etiketinin beyaz listede olması gerekir:
116 |
117 | * `transition <property> (Also -vendorPrefix-transition)`
118 | * @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
119 |
120 | `overflow` özelliğinin (ve `overflow-y`, `overflow-x`) stili <span class="notranslate">“auto”</span> veya <span class="notranslate">“scroll”</span> olarak belirlenemez.
121 | AMP dokümanlarında hiçbir kullanıcı tanımlı öğenin kaydırma çubuğu olamaz.
122 |
123 | ## Özel yazı tipleri istisnası
124 |
125 | AMP sayfaları harici stil sayfaları içeremez. Bunun tek istisnası özel yazı tipleridir.
126 | Özel yazı tiplerine referansta bulunmak için desteklenen iki yöntem, beyaz listedeki yazı tipi sağlayıcılarını işaret eden bağlantı etiketlerini ve `@font-face` öğesini dahil etmektir.
127 |
128 | Yazı tipi sağlayıcıları, yalnızca CSS entegrasyonlarını desteklediklerinde ve HTTPS üzerinde sunum yaptıklarında beyaz listeye eklenebilir. Şu anda yalnızca aşağıdaki kaynaklar beyaz listeye alınmıştır ve bağlantı etiketleri aracılığıyla yazı tipi sunumu için bu kaynaklara izin verilmektedir:
129 |
130 | * [https://fast.fonts.net](https://fast.fonts.net)
131 | * [https://fonts.googleapis.com](https://fonts.googleapis.com)
132 |
133 | Beyaz listedeki Google Fonts yazı tipi sağlayıcısını işaret eden örnek bağlantı etiketi:
134 |
135 | [sourcecode:html]
136 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
137 | [/sourcecode]
138 |
139 | Alternatif olarak, [`@font-face`](https://developer.mozilla.org/tr/docs/Web/CSS/%40font-face) öğesini kullanabilirsiniz.
140 | `@font-face` aracılığıyla dahil edilen yazı tipleri, HTTP veya HTTPS şeması aracılığıyla getirilmelidir.
141 |
```
--------------------------------------------------------------------------------
/content/pages/amp-conf-2017.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title: AMP Conf 2017
3 | noglobalnote: 1
4 | class: amp-conf
5 |
6 | components:
7 | - iframe
8 | stylesheet: pages/amp-conf.css
9 | ---
10 |
11 | {% set conf = g.doc('/content/includes/amp-conf-2017.yaml', locale=doc.locale) %}
12 |
13 | <section class="teaser amp-conf-section">
14 |
15 | <h2>
16 | AMP Conf
17 | </h2>
18 | <p>
19 | <span><strong>March 7/8</strong> in NYC.</span>
20 | <span><strong>14</strong> Talks.</span>
21 | <span><strong>5</strong> Panels.</span>
22 | <span>Live-streamed.</span>
23 | </p>
24 |
25 | </section>
26 |
27 | <section class="description amp-conf-section">
28 |
29 | <p>
30 | <span>Connect with the AMP developers and ecosystem and learn how to create beautiful, interactive, responsive and successful AMP pages. Join us if you're a web developer or designer interested in AMP, either in the livestream or in person for chock-full two days of content.</span>
31 | <a href="{{conf.registration_link}}" class="reserve-button">Join the waitlist</a>
32 | </p>
33 |
34 | <ul>
35 | <li><a href="#schedule">Schedule</a></li>
36 | <li><a href="#speakers">Speakers</a></li>
37 | <li><a href="#workshops">Workshops</a></li>
38 | <li><a href="#location">Location</a></li>
39 | <li><a href="#faq">FAQ</a></li>
40 | </ul>
41 |
42 | </section>
43 |
44 | <section class="schedule amp-conf-section">
45 |
46 | <div class="wrapper">
47 | <h3 id="schedule">Schedule</h3>
48 |
49 | <p>All talks and sessions are designed to help you create amazing, successful AMP content (and to help others do the same!), and over 50% of are given by partners in the AMP ecosystem.</p>
50 |
51 | {% macro render_session(item) -%}
52 |
53 | {% if conf.speakers[item.speaker] %}
54 | <span class="image">{% if conf.speakers[item.speaker].pic %}<amp-img src="{{ conf.speakers[item.speaker].pic }}" width="100" height="100"></amp-img>{% endif %}</span>
55 | {% endif %}
56 |
57 | {% if item.speakers %}
58 | {% for speaker in item.speakers if conf.speakers[speaker] %}
59 | <span class="image multiple">{% if conf.speakers[speaker].pic %}<amp-img src="{{ conf.speakers[speaker].pic }}" width="60" height="60"></amp-img>{% endif %}</span>
60 | {% endfor %}
61 | {% endif %}
62 |
63 | <time>{{ item.time }}</time>
64 | <div>
65 | <h5 class="{{ item.type }}">{{ item.title }}</h5>
66 | {% if conf.speakers[item.speaker] %}
67 | <small><a href="#{{ item.speaker }}">{{ conf.speakers[item.speaker].name }}, {{ conf.speakers[item.speaker].company }}</a></small>
68 | {% endif %}
69 | {% if item.speakers %}
70 | {% if conf.speakers[item.moderator] %}
71 | <small><a href="#{{ item.moderator }}">{{ conf.speakers[item.moderator].name }}, {{ conf.speakers[item.moderator].company }} (Moderator)</a></small>
72 | {% endif %}
73 | {% for speaker in item.speakers %}
74 | {% if conf.speakers[speaker] %}
75 | <small><a href="#{{ speaker }}">{{ conf.speakers[speaker].name }}, {{ conf.speakers[speaker].company }}</a></small>
76 | {% endif %}
77 | {% endfor %}
78 | {% endif %}
79 | {% if item.description %}
80 | <p>{{ item.description }}</p>
81 | {% endif %}
82 | {% if item.workshops %}
83 | <ul class="workshops">
84 | {% for workshop in item.workshops %}
85 | <li>
86 | <h6>{{ workshop.title }}</h6>
87 | </li>
88 | {% endfor %}
89 | </ul>
90 | {% endif %}
91 | </div>
92 |
93 | {%- endmacro %}
94 |
95 | <div class="tabs">
96 |
97 | </div>
98 |
99 | <div class="days">
100 |
101 | <div class="day">
102 | <h4>March 7th</h4>
103 | <ul class="schedule">
104 | {% for item in conf.agenda.day_1 %}
105 | <li class="{{ item.type }}">
106 | {{ render_session(item) }}
107 | </li>
108 | {% endfor %}
109 | </ul>
110 | </div>
111 |
112 | <div class="day">
113 | <h4>March 8th</h4>
114 | <ul class="schedule">
115 | {% for item in conf.agenda.day_2 %}
116 | <li class="{{ item.type }}">
117 | {{ render_session(item) }}
118 | </li>
119 | {% endfor %}
120 | </ul>
121 | </div>
122 | </div>
123 |
124 | </div>
125 |
126 | </section>
127 |
128 | <section class="speakers amp-conf-section">
129 |
130 | <div class="wrapper">
131 | <h3 id="speakers">Speakers</h3>
132 |
133 | <ul class="speakers">
134 | {% set sortedSpeakers = conf.speakers|sort %}
135 | {% for speaker in sortedSpeakers if conf.speakers[speaker].bio %}
136 | <li>
137 | <span class="image" data-name="{{ conf.speakers[speaker].name }}">{% if conf.speakers[speaker].pic %}<amp-img src="{{ conf.speakers[speaker].pic }}" width="400" height="400" layout="responsive"></amp-img>{% endif %}</span>
138 | <div>
139 | <h4 id="{{ speaker }}">{{ conf.speakers[speaker].name }}, {{ conf.speakers[speaker].company }}</h4>
140 | <p>{{ conf.speakers[speaker].bio|markdown|safe }}</p>
141 | </div>
142 | </li>
143 | {% endfor %}
144 | </ul>
145 |
146 | </div>
147 |
148 | </section>
149 |
150 | <section class="workshops amp-conf-section">
151 |
152 | <div class="wrapper">
153 | <h3 id="workshops">Workshops</h3>
154 | <p>Join us on Day 2 for a 2-hour long workshop with members of the AMP team. Bring your own laptop, watch a quick presentation, then walk through the codelab together with the help of on-site mentors that unblock you.</p>
155 |
156 | {% for item in conf.agenda.day_2 if item.workshops %}
157 | <ul class="workshops">
158 | {% for workshop in item.workshops %}
159 | <li>
160 | <h6>{{ workshop.title }}</h6>
161 | </li>
162 | {% endfor %}
163 | </ul>
164 | {% endfor %}
165 | </div>
166 |
167 | </section>
168 |
169 | <section class="location amp-conf-section">
170 | <div class="wrapper">
171 | <amp-iframe width=300 height=300
172 | sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
173 | layout="responsive"
174 | frameborder="0"
175 | src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3050.0600022262697!2d-74.0108920361199!3d40.72357632397405!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259f48e2e992f%3A0x7b5d67ea6c58814c!2sTribeca+360%C2%B0!5e0!3m2!1sen!2sus!4v1484082758953">
176 | <p placeholder>Loading..</p>
177 | </amp-iframe>
178 | <div>
179 | <h3 id="location">Location</h3>
180 | <p>Tribeca 360 (<a href="http://threesixtynyc.com/">Website</a>, <a href="https://goo.gl/maps/gmo8t5yxDot">Google Maps</a>).</p>
181 | <h3>Address</h3>
182 | <p>
183 | <span>10 Desbrosses St</span>
184 | <span>New York, NY 10013</span>
185 | </p>
186 | <h3>Live Stream</h3>
187 | <p>Coming soon!</p>
188 | </div>
189 | </div>
190 | </section>
191 |
192 | <section class="faq amp-conf-section">
193 | <div class="wrapper">
194 | <h3 id="faq">Frequently Asked Questions</h3>
195 | <dl>
196 |
197 | <dt>Does it cost anything?</dt>
198 | <dd>No - tickets are free of charge.</dd>
199 |
200 | <dt>Do I have to register for the live-stream?</dt>
201 | <dd>No! The registration is only for on-site attendees that physically attend the conference. Come back here to this site on March 7th for a link and embed of the live-stream.</dd>
202 |
203 | <dt>Who is the event for?</dt>
204 | <dd>Web developers and designers who have used AMP and want to create even better AMP experiences, who haven't used AMP and are curious or want to contribute to AMP to make it better for everyone, and the web at large.</dd>
205 |
206 | <dt>Does reserving a spot mean I am signed up?</dt>
207 | <dd>Not yet. While your chances of getting a seat are pretty good, we will confirm attendees on a case-by-case basis to ensure we attract the right audience. Note that your seat is not confirmed until you receive a confirmation code.</dd>
208 |
209 | <dt>When will I hear back if I have a spot?</dt>
210 | <dd>We'll try to confirm you within less than a week!</dd>
211 |
212 | <dt>What determines if I have a spot?</dt>
213 | <dd>The AMP Conf is a mainly developer and designer focussed event (read: the people actually creating AMP experiences). If you're non-technical, you may still apply but you'll have a slimmer chance of getting through (and you'll enjoy the conf less!).</dd>
214 |
215 | <dt>When will the schedule be announced?</dt>
216 | <dd>We'll announce a detailed schedule before end of January.</dd>
217 | </dl>
218 | </div>
219 | </section>
220 |
221 | <section class="footer amp-conf-section">
222 | <ul>
223 | <li><a href="/amp-conf-2017/code-of-conduct">Code of Conduct</a></li>
224 | <li><a href="/amp-conf-2017/accessibility">Accessibility</a></li>
225 | <li><a href="mailto:[email protected]">Contact</a></li>
226 | </ul>
227 | </section>
228 |
229 |
230 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: CSS compatibles
3 | ---
4 |
5 | Igual que en todas las páginas web, se aplica estilo a las páginas de AMP con CSS, pero no se puede hacer referencia a hojas de estilo externas
6 | (con la excepción de las [fuentes personalizadas](#la-excepcion-de-las-fuentes-personalizadas)).
7 | También hay ciertos estilos que no están permitidos por cuestiones de rendimiento;
8 | los atributos de estilo insertados no están permitidos.
9 |
10 | Todos los estilos deben encontrarse en el encabezado del documento
11 | (consulta [Añadir estilos a una página](/docs/guides/validate.html#add-styles-to-a-page)).
12 | Pero se pueden utilizar preprocesadores de CSS y plantillas para crear páginas estáticas
13 | y así administrar mejor el contenido.
14 |
15 | **Nota:**
16 | Los componentes de AMP vienen con estilos predeterminados
17 | para facilitar la autoría de las páginas adaptables de forma razonable.
18 | Estos estilos se definen en
19 | [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
20 |
21 | [TOC]
22 |
23 | ## Usar preprocesadores de CSS
24 |
25 | La salida generada por los preprocesadores funciona tan bien en AMP como en cualquier otra página web.
26 | Por ejemplo, para el sitio de [ampproject.org](https://www.ampproject.org/) se utiliza
27 | [Sass](http://sass-lang.com/).
28 | (Utilizamos [Grow](http://grow.io/) para construir las páginas estáticas de AMP
29 | que conforman el sitio de [ampproject.org](https://www.ampproject.org/)).
30 |
31 | Cuando se utilizan preprocesadores,
32 | se debe prestar especial atención a lo que se incluye, y cargar solo lo que utilicen las páginas.
33 | Por ejemplo,
34 | [head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html)
35 | incluye todas las marcas de AMP y el CSS insertado de los archivos de origen `*.scss`.
36 | También incluye la secuencia de comandos de elemento personalizado para
37 | [`amp-youtube`](/docs/reference/extended/amp-youtube.html), entre otras, por lo que muchas páginas del sitio pueden incluir vídeos de YouTube insertados.
38 |
39 | [sourcecode:html] {% raw %}
40 | <head>
41 | <meta charset="utf-8">
42 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
43 | <meta content="IE=Edge" http-equiv="X-UA-Compatible">
44 | <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
45 | <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
46 |
47 | <title>Accelerated Mobile Pages Project</title>
48 | <link rel="shortcut icon" href="/static/img/amp_favicon.png">
49 | <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
50 | <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
51 | <style amp-custom>
52 | {% include "/assets/css/main.min.css" %}
53 | </style>
54 |
55 | <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>
56 | <script async src="https://cdn.ampproject.org/v0.js"></script>
57 | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
58 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
59 | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
60 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
61 | <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
62 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
63 | </head>
64 | {% endraw %} [/sourcecode]
65 |
66 | Para ver cómo se traduce lo anterior en AMP HTML con formato,
67 | consulta la fuente de cualquier página de [ampproject.org](https://www.ampproject.org/).
68 | (En Google Chrome, haz clic con el botón derecho y selecciona `Ver código fuente de la página`).
69 |
70 | ## Estilos no permitidos
71 |
72 | Los siguientes estilos no están permitidos en las páginas de AMP:
73 |
74 | <table>
75 | <thead>
76 | <tr>
77 | <th data-th="Banned style">Estilo prohibido</th>
78 | <th data-th="Description">Descripción</th>
79 | </tr>
80 | </thead>
81 | <tbody>
82 | <tr>
83 | <td data-th="Banned style">Atributos de estilo insertados</td>
84 | <td data-th="Description">Todos los estilos deben estar definidos en la sección <code><head></code> de la página, dentro de una etiqueta <code><style amp-custom></code>.</td>
85 | </tr>
86 | <tr>
87 | <td data-th="Banned style"><code>!</code> (calificador de importante) </td>
88 | <td data-th="Description">No está permitido su uso.
89 | Este es un requisito necesario para que AMP aplique sus normas relativas al tamaño de los elementos.</td>
90 | </tr>
91 | <tr>
92 | <td data-th="Banned style"><code><link rel=”stylesheet”></code></td>
93 | <td data-th="Description">No está permitido, con la excepción de las <a href="#the-custom-fonts-exception">fuentes personalizadas.</td>
94 | </tr>
95 | <tr>
96 | <td data-th="Banned style"><code>*</code> (selector universal)</td>
97 | <td data-th="Description">Tiene implicaciones de rendimiento negativas y podría utilizarse para eludir otras restricciones del selector.</td>
98 | </tr>
99 | <tr>
100 | <td data-th="Banned style"><code>:not()</code></td>
101 | <td data-th="Description">Podría utilizarse para simular el selector universal.</td>
102 | </tr>
103 | <tr>
104 | <td data-th="Banned style">Pseudoselectores, pseudoclases y pseudoelementos</td>
105 | <td data-th="Description">Los pseudoselectores, pseudoclases y pseudoelementos solo están permitidos en los selectores que contengan nombres de etiquetas que no comiencen con <code>amp-</code>.
106 | Ejemplo correcto: <code>a:hover, div:last-of-type</code>
107 | Ejemplo incorrecto: <code>amp-img:hover, amp-img:last-of-type</code></td>
108 | </tr>
109 | <tr>
110 | <td data-th="Banned style">Clase <code>-amp-</code> y nombres de etiquetas <code>i-amp-</code></td>
111 | <td data-th="Description">Los nombres de las clases en las hojas de estilo de autor no pueden empezar con la cadena <code>-amp-</code>. Están reservados para uso interno en tiempo de ejecución de AMP. Por tanto, la hoja de estilo del usuario no puede hacer referencia a los selectores de CSS para las clases <code>-amp-</code> y las etiquetas <code>i-amp</code>.</td>
112 | </tr>
113 | <tr>
114 | <td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
115 | <td data-th="Description">Estas propiedades no están permitidas
116 | por razones de seguridad.</td>
117 | </tr>
118 | <tr>
119 | <td data-th="Banned style"><code>filter</code></td>
120 | <td data-th="Description">Se incluye en la lista negra por problemas de rendimiento.</td>
121 | </tr>
122 | </tbody>
123 | </table>
124 |
125 | ## Propiedades de transición y animación incluidas en la lista blanca
126 |
127 | AMP solo permite transiciones y animaciones de propiedades
128 | que puedan ser aceleradas por GPU en los navegadores comunes.
129 | El proyecto de AMP incluye acualmente en la lista blanca `opacity`, `transform`
130 | y `-vendorPrefix-transform`.
131 |
132 | En los siguientes ejemplos, `<property>` tiene que estar en la lista blanca:
133 |
134 | * `transition <property> (Also -vendorPrefix-transition)`
135 | * @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
136 |
137 | La propiedad `overflow` (y `overflow-y`, `overflow-x`)
138 | no puede tener como estilo “auto” ni “scroll”.
139 | Ningún elemento definido por el usuario en un documento de AMP puede tener una barra de desplazamiento.
140 |
141 | ## La excepción de las fuentes personalizadas
142 |
143 | Las páginas de AMP no pueden incluir hojas de estilo externas, con la excepción de fuentes personalizadas.
144 | Los dos métodos admitidos para hacer referencia a fuentes personalizadas son
145 | las etiquetas de enlace que apuntan a los proveedores de fuentes de la lista blanca y la inclusión de `@font-face`.
146 |
147 | Los proveedores de fuentes solo pueden estar en la lista blanca
148 | si son compatibles con las integraciones de CSS exclusivamente y publican en HTTPS.
149 | Actualmente, solo estos orígenes se incluyen en la lista blanca
150 | y pueden publicar fuentes mediante etiquetas de enlace:
151 |
152 | * [https://fast.fonts.net](https://fast.fonts.net)
153 | * [https://fonts.googleapis.com](https://fonts.googleapis.com)
154 |
155 | Ejemplo de etiqueta de enlace que apunta al proveedor de fuente en la lista blanca, Google Fonts:
156 |
157 | [sourcecode:html]
158 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
159 | [/sourcecode]
160 |
161 | Como alternativa, se puede usar [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).
162 | Las fuentes incluidas mediante `@font-face` deben obtenerse con
163 | el esquema HTTP o HTTPS.
164 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Unterstützte CSS-Stile
3 | ---
4 | [TOC]
5 |
6 | Wie bei allen Webseiten werden auch bei AMP-Seiten CSS-Stile verwendet, aber abgesehen von [benutzerdefinierten Schriftarten](#the-custom-fonts-exception) können Sie nicht auf externe Stylesheets verweisen.
7 | Außerdem sind bestimmte Stile wegen der Auswirkungen auf die Leistung unzulässig und auch Inline-Stilattribute sind nicht erlaubt.
8 |
9 | Alle Stile müssen im head-Abschnitt des Dokuments angegeben werden (siehe [Seite mit Stilen versehen](/docs/guides/validate.html#add-styles-to-a-page)).
10 | Sie können allerdings CSS-Präprozessoren und Vorlagen verwenden, um statische Seiten für die bessere Verwaltung Ihrer Inhalte zu erstellen.
11 |
12 | {% call callout('Note', type='note') %}
13 | Für AMP-Komponenten stehen Standardstile zur Verfügung, um die Erstellung responsiver Seiten zu vereinfachen.
14 | Diese Stile werden in [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css) definiert.
15 | {% endcall %}
16 |
17 | ## CSS-Präprozessoren verwenden
18 |
19 | Die von Präprozessoren erzeugte Ausgabe funktioniert in AMP ebenso gut wie auf jeder anderen Webseite.
20 | Die Website [ampproject.org](https://www.ampproject.org/) verwendet z. B. [Sass](http://sass-lang.com/).
21 | Wir verwenden [Grow](http://grow.io/) zum Erstellen der statischen AMP-Seiten, aus denen die Website [ampproject.org](https://www.ampproject.org/) besteht.
22 |
23 | Achten Sie bei der Verwendung von Präprozessoren besonders darauf, was Sie einschließen. Laden Sie nur das, was Ihre Seiten auch verwenden.
24 | Zum Beispiel enthält [head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html) das gesamte erforderliche AMP-Markup sowie die Inline-CSS-Stile aus den `*.scss`-Quelldateien.
25 | Unter anderem enthält es auch das Skript für benutzerdefinierte Elemente für [`amp-youtube`](/docs/reference/extended/amp-youtube.html), sodass auf vielen Seiten der Website YouTube-Videos eingebettet werden können.
26 |
27 | [sourcecode:html] {% raw %}
28 | <head>
29 | <meta charset="utf-8">
30 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
31 | <meta content="IE=Edge" http-equiv="X-UA-Compatible">
32 | <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
33 | <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
34 |
35 | <title>Accelerated Mobile Pages Project</title>
36 | <link rel="shortcut icon" href="/static/img/amp_favicon.png">
37 | <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
38 | <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
39 | <style amp-custom>
40 | {% include "/assets/css/main.min.css" %}
41 | </style>
42 |
43 | <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>
44 | <script async src="https://cdn.ampproject.org/v0.js"></script>
45 | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
46 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
47 | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
48 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
49 | <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
50 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
51 | </head>
52 | {% endraw %} [/sourcecode]
53 |
54 | Wenn Sie wissen möchten, wie der obige Code in formatiertem AMP-HTML aussieht, sehen Sie sich den Quellcode einer beliebigen Seite in [ampproject.org](https://www.ampproject.org/) an.
55 | In Chrome klicken Sie dazu mit der rechten Maustaste und wählen `View Page Source` aus.
56 |
57 | ## Unzulässige Stile
58 |
59 | Die folgenden Stile sind auf AMP-Seiten nicht erlaubt:
60 |
61 | <table>
62 | <thead>
63 | <tr>
64 | <th data-th="Banned style">Unzulässiger Stil</th>
65 | <th data-th="Description">Beschreibung</th>
66 | </tr>
67 | </thead>
68 | <tbody>
69 | <tr>
70 | <td data-th="Banned style">Inline-Stilattribute</td>
71 | <td data-th="Description">Alle Stile müssen im <code><head></code>-Abschnitt der Seite in einem <code><style amp-custom></code>-Tag definiert werden.</td>
72 | </tr>
73 | <tr>
74 | <td data-th="Banned style">Qualifizierer <code>!important</code> </td>
75 | <td data-th="Description">Darf nicht verwendet werden.
76 | Andernfalls können die AMP-Regeln zur Festlegung der Elementgröße nicht angewandt werden.</td>
77 | </tr>
78 | <tr>
79 | <td data-th="Banned style"><code><link rel="stylesheet"></code></td>
80 | <td data-th="Description">Unzulässig mit Ausnahme [benutzerdefinierter Schriftarten](#the-custom-fonts-exception)</td>
81 | </tr>
82 | <tr>
83 | <td data-th="Banned style"><code>*</code> (Universalselektor)</td>
84 | <td data-th="Description">Negative Auswirkungen auf die Leistung. Könnte zur Umgehung anderer Selektoreinschränkungen verwendet werden</td>
85 | </tr>
86 | <tr>
87 | <td data-th="Banned style"><code>:not()</code></td>
88 | <td data-th="Description">Könnte zur Simulation des Universalselektors verwendet werden</td>
89 | </tr>
90 | <tr>
91 | <td data-th="Banned style">Pseudoselektoren, Pseudoklassen und Pseudoelemente</td>
92 | <td data-th="Description">Pseudoselektoren, Pseudoklassen und Pseudoelemente sind nur in Selektoren erlaubt, die Tag-Namen enthalten, die wiederum nicht mit <code>amp-</code> beginnen dürfen.
93 | Zulässig sind z. B. <code>a:hover, div:last-of-type</code>. Unzulässig sind beispielsweise <code>amp-img:hover, amp-img:last-of-type</code>.</td>
94 | </tr>
95 | <tr>
96 | <td data-th="Banned style">Klassennamen mit <code>-amp-</code> und Tag-Namen mit <code>i-amp-</code></td>
97 | <td data-th="Description">Klassennamen in Autoren-Stylesheets dürfen nicht mit dem String <code>-amp-</code> beginnen. Solche Stylesheets sind für den internen Gebrauch durch die AMP-Laufzeit vorgesehen. Folglich darf das Stylesheet des Nutzers nicht auf CSS-Selektoren für Klassen mit <code>-amp-</code> und Tags mit <code>i-amp</code> verweisen.</td>
98 | </tr>
99 | <tr>
100 | <td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
101 | <td data-th="Description">Diese Eigenschaften sind aus Sicherheitsgründen nicht zulässig.</td>
102 | </tr>
103 | <tr>
104 | <td data-th="Banned style"><code>filter</code></td>
105 | <td data-th="Description">Aus Leistungsgründen nicht erlaubt</td>
106 | </tr>
107 | </tbody>
108 | </table>
109 |
110 | ## transition- und animation-Eigenschaften auf der weißen Liste
111 |
112 | In AMP sind nur Übergänge und Animationen von Eigenschaften gestattet, die in üblichen Browsern von der GPU beschleunigt werden können.
113 | Im AMP-Projekt befinden sich derzeit `opacity`, `transform` und `-vendorPrefix-transform` auf der weißen Liste.
114 |
115 | In den folgenden Beispielen muss `<property>` auf die weiße Liste gesetzt sein:
116 |
117 | * `transition <property> (Also -vendorPrefix-transition)`
118 | * @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
119 |
120 | Die `overflow`-Eigenschaft sowie `overflow-y` und `overflow-x` dürfen nicht als “auto” oder “scroll” definiert werden.
121 | Benutzerdefinierte Elemente in einem AMP-Dokument dürfen keine Bildlaufleiste enthalten.
122 |
123 | ## Die Ausnahme: benutzerdefinierte Schriftarten
124 |
125 | Abgesehen von benutzerdefinierten Schriftarten dürfen AMP-Seiten keine externen Stylesheets enthalten.
126 | Die zwei unterstützten Methoden für den Verweis auf benutzerdefinierte Schriftarten sind link-Tags zur Angabe von Schriftartenanbietern auf der weißen Liste sowie die Verwendung von `@font-face`.
127 |
128 | Schriftartenanbieter können nur auf die weiße Liste gesetzt werden, wenn sie CSS-spezifische Integrationen unterstützen und wenn die Bereitstellung über HTTPS erfolgt. Derzeit befinden sich nur die folgenden Quellen auf der weißen Liste und sind zur Bereitstellung von Schriftarten über link-Tags zulässig:
129 |
130 | * [https://fast.fonts.net](https://fast.fonts.net)
131 | * [https://fonts.googleapis.com](https://fonts.googleapis.com)
132 |
133 | Beispiel für link-Tag, das auf den auf der weißen Liste befindlichen Schriftartenanbieter Google Fonts verweist:
134 |
135 | [sourcecode:html]
136 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
137 | [/sourcecode]
138 |
139 | Alternativ kann [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) verwendet werden.
140 | Über `@font-face` angegebene Schriftarten müssen über das HTTP- oder HTTPS-Schema abgerufen werden.
141 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: CSS compatibles
3 | ---
4 |
5 | Comme toutes les pages Web, les pages AMP utilisent le langage CSS pour les styles, mais vous ne pouvez pas référencer des feuilles de style externes (à l'exception des [polices personnalisées](#the-custom-fonts-exception)).
6 | Certains styles sont également interdits en raison de conséquences sur les performances ; les attributs de style intégrés ne sont pas autorisés.
7 |
8 | Tous les styles doivent se trouver dans l'en-tête du document (voir [Ajouter des styles à une page](/docs/guides/validate.html#add-styles-to-a-page)).
9 | Cependant, vous pouvez utiliser des préprocesseurs CSS et des modèles pour créer des pages statiques afin de mieux gérer votre contenu.
10 |
11 | **Remarque** : Les composants AMP ont des styles par défaut pour faciliter la création de pages responsives.
12 | Ces styles sont définis dans l'[`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
13 |
14 | [TOC]
15 |
16 | ## Utiliser les préprocesseurs CSS
17 |
18 | La sortie générée par des préprocesseurs fonctionne aussi bien avec les pages AMP qu'avec les autres pages Web.
19 | Par exemple, le site [ampproject.org](https://www.ampproject.org/) utilise [Sass](http://sass-lang.com/).
20 | Nous utilisons [Grow](http://grow.io/) pour créer les pages AMP statiques qui composent le site [ampproject.org](https://www.ampproject.org/).
21 |
22 | Lorsque vous utilisez des préprocesseurs, accordez une attention particulière à ce que vous incluez ; chargez seulement ce que vos pages utilisent.
23 | Par exemple, [head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html) inclut tout le balisage AMP requis et le CSS intégré à partir des fichiers sources `*.scss`.
24 | Il comprend également, entre autres, le script d'élément personnalisé pour [`amp-youtube`](/docs/reference/extended/amp-youtube.html), afin que de nombreuses pages sur le site puissent inclure des vidéos YouTube intégrées.
25 |
26 | [sourcecode:html] {% raw %}
27 | <head>
28 | <meta charset="utf-8">
29 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
30 | <meta content="IE=Edge" http-equiv="X-UA-Compatible">
31 | <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
32 | <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
33 |
34 | <title>Accelerated Mobile Pages Project</title>
35 | <link rel="shortcut icon" href="/static/img/amp_favicon.png">
36 | <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
37 | <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
38 | <style amp-custom>
39 | {% include "/assets/css/main.min.css" %}
40 | </style>
41 |
42 | <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>
43 | <script async src="https://cdn.ampproject.org/v0.js"></script>
44 | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
45 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
46 | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
47 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
48 | <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
49 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
50 | </head>
51 | {% endraw %} [/sourcecode]
52 |
53 | Pour voir comment ce qui précède se traduit en langage AMP HTML formaté, affichez la source de toute page dans [ampproject.org](https://www.ampproject.org/).
54 | (Dans Chrome, faites un clic droit, puis sélectionnez `Afficher la source de la page`.)
55 |
56 | ## Styles interdits
57 |
58 | Les styles suivants ne sont pas autorisés dans les pages AMP :
59 |
60 | <table>
61 | <thead>
62 | <tr>
63 | <th data-th="Banned style">Style interdit</th>
64 | <th data-th="Description">Description</th>
65 | </tr>
66 | </thead>
67 | <tbody>
68 | <tr>
69 | <td data-th="Banned style">Attributs de style intégrés</td>
70 | <td data-th="Description">Tous les styles doivent être définis dans l'en-tête <code><head></code> de la page, au sein d'une balise <code><style amp-custom></code>.</td>
71 | </tr>
72 | <tr>
73 | <td data-th="Banned style"><code>!</code>qualificateur important </td>
74 | <td data-th="Description">Utilisation interdite.
75 | Il s'agit d'une condition nécessaire pour permettre à l'AMP de faire appliquer les règles de dimensionnement de ses éléments.</td>
76 | </tr>
77 | <tr>
78 | <td data-th="Banned style"><code><link rel="stylesheet"></code></td>
79 | <td data-th="Description">Interdit à l'exception des <a href="#the-custom-fonts-exception">polices personnalisées</a>.</td>
80 | </tr>
81 | <tr>
82 | <td data-th="Banned style"><code>*</code> (sélecteur universel)</td>
83 | <td data-th="Description">Implications négatives sur les performances ; pourrait être utilisé pour contourner d'autres restrictions de sélection.</td>
84 | </tr>
85 | <tr>
86 | <td data-th="Banned style"><code>:not()</code></td>
87 | <td data-th="Description">Peut être utilisé pour simuler le sélecteur universel.</td>
88 | </tr>
89 | <tr>
90 | <td data-th="Banned style">Pseudo-sélecteurs, pseudo-classes et pseudo-éléments</td>
91 | <td data-th="Description">Les pseudo-sélecteurs, pseudo-classes et pseudo-éléments ne sont autorisés que dans les sélecteurs qui contiennent des noms de balises, ces derniers ne devant pas commencer par <code>amp-</code>.
92 | Exemple correct : <code>a:hover, div:last-of-type</code>
93 | Exemple incorrect : <code>amp-img:hover, amp-img:last-of-type</code></td>
94 | </tr>
95 | <tr>
96 | <td data-th="Banned style">Noms de classes <code>-amp-</code> et de balises <code>i-amp-</code></td>
97 | <td data-th="Description">Les noms de classes, dans les feuilles de styles d'auteur, ne peuvent pas commencer par la chaîne <code>-amp-</code>. Ils sont réservés à un usage interne par l'exécution AMP. Il en résulte que la feuille de style de l'utilisateur ne peut pas faire référence à des sélecteurs CSS pour les classes <code>-amp-</code> et les balises <code>i-amp</code>.</td>
98 | </tr>
99 | <tr>
100 | <td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
101 | <td data-th="Description">Ces propriétés ne sont pas autorisées pour des raisons de sécurité.</td>
102 | </tr>
103 | <tr>
104 | <td data-th="Banned style"><code>filter</code></td>
105 | <td data-th="Description">Mis sur liste noire en raison de problèmes de performances.</td>
106 | </tr>
107 | </tbody>
108 | </table>
109 |
110 | ## Propriétés d'animations et de transitions sur liste blanche
111 |
112 | L'AMP accepte seulement les transitions et les animations de propriétés qui peuvent faire l'objet d'une accélération GPU dans les navigateurs courants.
113 | Le projet AMP accepte actuellement `opacity`, `transform` et `-vendorPrefix-transform`.
114 |
115 | Dans les exemples suivants, `<property>` doit être sur liste blanche :
116 |
117 | * `transition <property> (Also -vendorPrefix-transition)`
118 | * @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
119 |
120 | La propriété `overflow` (et `overflow-y`, `overflow-x`) ne peut pas utiliser le style “auto” ni “scroll”.
121 | Aucun élément défini par l'utilisateur dans un document AMP ne peut avoir une barre de défilement.
122 |
123 | ## Exception : les polices personnalisées
124 |
125 | Les pages AMP ne peuvent pas inclure de feuilles de style externes, à l'exception des polices personnalisées.
126 | Les deux méthodes acceptées pour le référencement des polices personnalisées sont les balises de liens pointant vers les fournisseurs de polices figurant sur liste blanche et l'inclusion de `@font-face`.
127 |
128 | Les fournisseurs de polices ne peuvent être sur liste blanche que s'ils adoptent les intégrations CSS uniquement et utilisent le protocole HTTPS. Actuellement, seules ces origines figurent sur liste blanche et sont autorisées à offrir des polices via les balises de liens :
129 |
130 | * [https://fast.fonts.net](https://fast.fonts.net)
131 | * [https://fonts.googleapis.com](https://fonts.googleapis.com)
132 |
133 | Exemple de balise de lien pointant vers le fournisseur de polices sur liste blanche, Google Fonts :
134 |
135 | [sourcecode:html]
136 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
137 | [/sourcecode]
138 |
139 | Vous pouvez aussi utiliser [`@font-face`](https://developer.mozilla.org/fr-FR/docs/Web/CSS/@font-face).
140 | Les polices incluses via `@font-face` doivent être récupérées via le schéma HTTP ou HTTPS.
141 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Stili CSS supportati
3 | ---
4 |
5 | Come per tutte le pagine web, per le pagine AMP vengono utilizzati gli stili CSS, ma non puoi fare riferimento a fogli di stile esterni (ad eccezione dei [tipi di carattere personalizzati](#the-custom-fonts-exception)).
6 | Inoltre, alcuni stili non sono consentiti a causa delle implicazioni legate al rendimento; gli attributi di stili in linea non sono consentiti.
7 |
8 | Tutti gli stili devono essere inseriti nella sezione head del documento (leggi la sezione [Aggiungere stili a una pagina](/docs/guides/validate.html#add-styles-to-a-page)).
9 | Puoi però utilizzare i preprocessori e i modelli CSS per creare pagine statiche e poter così gestire meglio i tuoi contenuti.
10 |
11 | **Nota.** Nei componenti AMP ci sono stili predefiniti integrati che facilitano la creazione di pagine reattive.
12 | Questi stili sono definiti nell'elemento [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
13 |
14 | [TOC]
15 |
16 | ## Utilizzare i preprocessori CSS
17 |
18 | L'output generato dai preprocessori funziona bene nelle pagine AMP così come in qualsiasi altra pagina web.
19 | Ad esempio, il sito [ampproject.org](https://www.ampproject.org/) utilizza il linguaggio [Sass](http://sass-lang.com/) (noi utilizziamo [Grow](http://grow.io/) per creare le pagine AMP statiche del sito [ampproject.org](https://www.ampproject.org/)).
20 |
21 | Se utilizzi i preprocessori, presta particolare attenzione a ciò che includi; carica soltanto gli elementi utilizzati nelle pagine.
22 | Ad esempio, nella sezione [head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html) sono inclusi tutti gli elementi di markup AMP e gli stili CSS in linea necessari recuperati dai file sorgente `*.scss`.
23 | È incluso, tra gli altri, anche lo script di elementi personalizzati per [`amp-youtube`](/docs/reference/extended/amp-youtube.html), per consentire di includere video di YouTube incorporati in tante pagine del sito.
24 |
25 | [sourcecode:html] {% raw %}
26 | <head>
27 | <meta charset="utf-8">
28 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
29 | <meta content="IE=Edge" http-equiv="X-UA-Compatible">
30 | <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
31 | <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
32 |
33 | <title>Accelerated Mobile Pages Project</title>
34 | <link rel="shortcut icon" href="/static/img/amp_favicon.png">
35 | <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
36 | <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
37 | <style amp-custom>
38 | {% include "/assets/css/main.min.css" %}
39 | </style>
40 |
41 | <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>
42 | <script async src="https://cdn.ampproject.org/v0.js"></script>
43 | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
44 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
45 | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
46 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
47 | <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
48 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
49 | </head>
50 | {% endraw %} [/sourcecode]
51 |
52 | Per sapere in che modo il codice precedente viene convertito in pagine HTML AMP formattate, visualizza il codice sorgente di qualsiasi pagina sul sito [ampproject.org](https://www.ampproject.org/).
53 | In Chrome, fai clic con il pulsante destro del mouse e seleziona `Visualizza sorgente pagina`.
54 |
55 | ## Stili non consentiti
56 |
57 | Gli stili che seguono non sono consentiti nelle pagine AMP:
58 |
59 | <table>
60 | <thead>
61 | <tr>
62 | <th data-th="Banned style">Stile vietato</th>
63 | <th data-th="Description">Descrizione</th>
64 | </tr>
65 | </thead>
66 | <tbody>
67 | <tr>
68 | <td data-th="Banned style">Attributi di stili in linea</td>
69 | <td data-th="Description">Tutti gli stili devono essere definiti all'interno di un tag <code><style amp-custom></code> nella sezione <code><head></code> della pagina.</td>
70 | </tr>
71 | <tr>
72 | <td data-th="Banned style"><code>!</code>important (qualificatore) </td>
73 | <td data-th="Description">Utilizzo non consentito.
74 | Si tratta di un requisito necessario per consentire l'applicazione delle regole di ridimensionamento degli elementi di AMP.</td>
75 | </tr>
76 | <tr>
77 | <td data-th="Banned style"><code><link rel="stylesheet"></code></td>
78 | <td data-th="Description">Non consentito, se non per i <a href="#the-custom-fonts-exception">tipi di carattere personalizzati</a>.</td>
79 | </tr>
80 | <tr>
81 | <td data-th="Banned style"><code>*</code> (selettore universale)</td>
82 | <td data-th="Description">Ha implicazioni negative sul rendimento e potrebbe essere utilizzato per aggirare altre limitazioni dei selettori.</td>
83 | </tr>
84 | <tr>
85 | <td data-th="Banned style"><code>:not()</code></td>
86 | <td data-th="Description">Potrebbe essere utilizzato per simulare il selettore universale.</td>
87 | </tr>
88 | <tr>
89 | <td data-th="Banned style">Pseudo-selettori, pseudo-classi e pseudo-elementi</td>
90 | <td data-th="Description">Pseudo-selettori, pseudo-classi e pseudo-elementi sono consentiti soltanto nei selettori che contengono nomi di tag, i quali non devono iniziare con <code>amp-</code>.
91 | Esempio corretto: <code>a:hover, div:last-of-type</code>
92 | Esempio errato: <code>amp-img:hover, amp-img:last-of-type</code></td>
93 | </tr>
94 | <tr>
95 | <td data-th="Banned style">Classe <code>-amp-</code> e nomi di tag <code>i-amp-</code></td>
96 | <td data-th="Description">Nei fogli di stile con autore, i nomi di classi non possono iniziare con la stringa <code>-amp-</code>. Queste stringhe possono essere utilizzate solo internamente per il runtime AMP. Ne consegue che il foglio di stile dell'utente non può fare riferimento ai selettori CSS per le classi <code>-amp-</code> e i tag <code>i-amp</code>.</td>
97 | </tr>
98 | <tr>
99 | <td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
100 | <td data-th="Description">Queste proprietà non sono consentite per motivi di sicurezza.</td>
101 | </tr>
102 | <tr>
103 | <td data-th="Banned style"><code>filter</code></td>
104 | <td data-th="Description">Non consentito per questioni di rendimento.</td>
105 | </tr>
106 | </tbody>
107 | </table>
108 |
109 | ## Proprietà di transizioni e animazioni consentite
110 |
111 | AMP consente soltanto le proprietà di transizioni e animazioni che è possibile sottoporre ad accelerazione GPU nei browser più comuni.
112 | Il progetto AMP autorizza attualmente le proprietà `opacity`, `transform` e `-vendorPrefix-transform`.
113 |
114 | Negli esempi seguenti, `<property>` deve essere nella whitelist:
115 |
116 | * `transition <property> (Also -vendorPrefix-transition)`
117 | * @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
118 |
119 | Alla proprietà `overflow` (e `overflow-y`, `overflow-x`) non può essere applicato lo stile “auto” o “scroll”.
120 | Nessun elemento definito dall'utente in un documento AMP può avere una barra di scorrimento.
121 |
122 | ## L'eccezione dei tipi di carattere personalizzati
123 |
124 | Le pagine AMP non possono includere fogli di stile esterni, ad eccezione dei tipi di carattere personalizzati.
125 | I due metodi supportati per i riferimenti ai tipi di carattere personalizzati sono l'utilizzo di tag link che rimandano ai fornitori di caratteri autorizzati e l'inclusione di `@font-face`.
126 |
127 | I fornitori di caratteri possono essere autorizzati soltanto se supportano le integrazioni solo CSS e se pubblicano i tipi di carattere tramite HTTPS. Attualmente, soltanto le seguenti origini sono autorizzate e consentite per la pubblicazione dei tipi di carattere tramite tag link:
128 |
129 | * [https://fast.fonts.net](https://fast.fonts.net)
130 | * [https://fonts.googleapis.com](https://fonts.googleapis.com)
131 |
132 | Esempio di tag link che rimanda al fornitore di caratteri autorizzato Google Fonts:
133 |
134 | [sourcecode:html]
135 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
136 | [/sourcecode]
137 |
138 | In alternativa puoi utilizzare [`@font-face`](https://developer.mozilla.org/it-IT/docs/Web/CSS/@font-face).
139 | I tipi di carattere inclusi tramite `@font-face` devono essere recuperati tramite lo schema HTTP o HTTPS.
140 |
```
--------------------------------------------------------------------------------
/assets/sass/pages/amp-conf.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '../_config.scss';
2 | @import '../_mixins.scss';
3 |
4 | .amp-conf {
5 |
6 | a.reserve-button {
7 | display: inline-block;
8 | background: #FFAB00;
9 | border-radius: 2px;
10 | padding: 0.5em 1em;
11 | color: #fff;
12 | font-size: 20px;
13 | font-weight: 400;
14 | vertical-align: middle;
15 | margin-top: 20px;
16 | margin-left: 24px;
17 | &:hover {
18 | text-decoration: none;
19 | background: #E69A00;
20 | }
21 | }
22 |
23 | section.amp-conf-section {
24 | padding: 0;
25 |
26 | .wrapper {
27 | margin: 0 auto;
28 | width: 80%;
29 | max-width: 800px;
30 | }
31 |
32 | h2 {
33 | font-size: 4em;
34 | margin-bottom: 0em;
35 | }
36 |
37 | &.teaser {
38 | margin-top: 80px;
39 | text-align: center;
40 |
41 | p {
42 |
43 | padding-bottom: 2em;
44 | span {
45 | font-weight: 400;
46 | }
47 | }
48 | }
49 |
50 | &.description {
51 | background: $gradient-anglebold;
52 | margin-top: 40px;
53 | position: relative;
54 |
55 | p {
56 | background: #fff;
57 | padding: 1em;
58 | margin: 0 auto;
59 | width: 80%;
60 | max-width: 800px;
61 | border-top: 5px solid #0379C4;
62 | position: relative;
63 | top: -40px;
64 | box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.31);
65 | text-align: center;
66 |
67 | span {
68 | display: block;
69 | text-align: left;
70 | }
71 | }
72 |
73 | ul {
74 | text-align: center;
75 | padding-bottom: 2em;
76 | li {
77 | background: #005992;
78 | padding: 6px 12px;
79 | padding-left: 20px;
80 | border-radius: 2px;
81 | display: inline-block;
82 | margin: 0;
83 | margin-left: -6px;
84 | position: relative;
85 | overflow: hidden;
86 | &::after {
87 | display: block;
88 | content: "";
89 | width: 4px;
90 | position: absolute;
91 | top: -4px;
92 | bottom: -4px;
93 | left: 4px;
94 | background: #fff;
95 | transform: rotate(10deg);
96 | z-index: 1;
97 | }
98 |
99 | &:first-child {
100 | margin-left: 0;
101 | &::after {
102 | display: none;
103 | }
104 | }
105 |
106 | }
107 | a {
108 | color: #fff;
109 | }
110 | }
111 | }
112 |
113 | &.schedule {
114 | padding: 2em 0;
115 | }
116 |
117 | &.speakers {
118 | padding: 2em 0;
119 | background: #f5f5f5;
120 | padding-bottom: 4em;
121 | }
122 |
123 | &.workshops {
124 | padding: 2em 0;
125 | padding-bottom: 4em;
126 | }
127 |
128 | &.location {
129 | padding: 2em 0;
130 | background: $gradient-anglebold;
131 |
132 | .wrapper {
133 | display: flex;
134 | flex-wrap: wrap;
135 | amp-iframe {
136 | flex: 1 0 40%;
137 | min-width: 100px;
138 | }
139 | div {
140 | margin-left: 2em;
141 | flex-grow: 1;
142 | @include max-screen(590px) {
143 | margin-left: 0;
144 | margin-top: 1em;
145 | }
146 | }
147 | }
148 |
149 | h3 {
150 | color: #fff;
151 | margin-top: 0;
152 | }
153 |
154 | p {
155 | color: #fff;
156 | }
157 |
158 | a {
159 | color: #fff;
160 | text-decoration: underline;
161 | }
162 |
163 | span {
164 | display: block;
165 | }
166 |
167 | }
168 |
169 | &.faq {
170 | font-size: 16px;
171 | font-weight: normal;
172 |
173 | h3 {
174 | color: #0379C4;
175 | font-size: 26px;
176 | font-weight: 300;
177 | margin-top: 1.1em;
178 | margin-bottom: 0.5em;
179 | }
180 |
181 | dd {
182 | margin-bottom: 1em;
183 | font-weight: 300;
184 | }
185 | }
186 |
187 | &.footer {
188 | ul {
189 | text-align: center;
190 | li {
191 | display: inline-block;
192 | padding: 1em;
193 | }
194 | }
195 | }
196 |
197 | }
198 |
199 | .code-of-conduct {
200 | padding-bottom: 2em;
201 | background: #fff;
202 | margin: 3%;
203 | ul,ol {
204 | margin-left: 2em;
205 | }
206 | }
207 |
208 | .days {
209 |
210 | }
211 |
212 | .day {
213 |
214 | box-sizing: border-box;
215 | min-width: 300px;
216 |
217 | h4 {
218 | border-bottom: 1px solid #eee;
219 | padding-bottom: 8px;
220 | }
221 | }
222 |
223 | ul.schedule {
224 | list-style: none;
225 | margin-left: 114px;
226 |
227 | > li {
228 | padding: 5px;
229 | padding-bottom: 10px;
230 | display: flex;
231 | align-items: flex-start;
232 | position: relative;
233 |
234 | &::after {
235 | content: "";
236 | display: block;
237 | position: absolute;
238 | width: 1px;
239 | background: #bbb;
240 | bottom: 0px;
241 | top: 35px;
242 | left: 23px;
243 | }
244 |
245 | div {
246 | padding-left: 23px;
247 | }
248 |
249 | span.image {
250 | display: block;
251 | border-radius: 50px;
252 | overflow: hidden;
253 | height: 100px;
254 | width: 100px;
255 | position: absolute;
256 | top: -30px;
257 | left: -115px;
258 | background: #eee;
259 | }
260 |
261 | span.image.multiple {
262 | width: 60px;
263 | height: 60px;
264 | &:nth-child(even) {
265 | left: -75px;
266 | }
267 |
268 | &:nth-child(2) { top: 10px; }
269 | &:nth-child(3) { top: 50px; }
270 | &:nth-child(4) { top: 90px; }
271 | &:nth-child(5) { top: 130px; }
272 | &:nth-child(6) { top: 170px; }
273 | }
274 |
275 | h5 {
276 | font-size: 1em;
277 | margin: 0;
278 | color: inherit;
279 | &::before {
280 | display: none;
281 | }
282 | &.session {
283 | font-weight: 500;
284 | }
285 | &.keynote {
286 | font-weight: 500;
287 | color: #0379C4;
288 | }
289 | &.panel,
290 | &.workshop {
291 | font-weight: 500;
292 | color: #FF9800;
293 | }
294 | }
295 |
296 | p {
297 | font-size: 13px;
298 | line-height: 1.6em;
299 | }
300 |
301 | }
302 |
303 | time {
304 | position: relative;
305 | display: inline-block;
306 | font-family: monospace;
307 | &::before {
308 | content: "";
309 | display: block;
310 | position: absolute;
311 | width: 12px;
312 | height: 1px;
313 | background: #bbb;
314 | right: -17px;
315 | top: 50%;
316 | }
317 | }
318 |
319 | > li.session,
320 | > li.keynote {
321 | time::after {
322 | content: "";
323 | display: block;
324 | position: absolute;
325 | width: 12px;
326 | height: 1px;
327 | background: #bbb;
328 | left: -17px;
329 | top: 50%;
330 | }
331 | }
332 |
333 | small {
334 | display: block;
335 | line-height: 1.6em;
336 | }
337 |
338 | }
339 |
340 | ul.workshops {
341 | list-style: none;
342 | display: flex;
343 |
344 | li {
345 | flex: 1 1 33%;
346 | border-right: 1px solid #ddd;
347 | &:nth-child(odd) {
348 | background: #f5f5f5;
349 | }
350 |
351 | &:last-child {
352 | border-right: 0;
353 | }
354 |
355 | h6 {
356 | font-weight: normal;
357 | margin: 0;
358 | padding: 1em;
359 | }
360 | }
361 | }
362 |
363 | @include max-screen(500px) {
364 | ul.schedule {
365 | margin-left: 0;
366 | > li span.image {
367 | display: none;
368 | }
369 | > li.session,
370 | > li.keynote {
371 | time::after {
372 | display: none;
373 | }
374 | }
375 | }
376 | ul.workshops {
377 | display: block;
378 | }
379 | }
380 |
381 | ul.speakers {
382 | list-style: none;
383 |
384 | li {
385 | display: flex;
386 | min-height: 100px;
387 | margin-bottom: 40px;
388 |
389 | &:nth-child(odd) {
390 | flex-direction: row-reverse;
391 | .image {
392 | margin-right: 0;
393 | margin-left: 20px;
394 | }
395 | }
396 | }
397 |
398 | h4 {
399 |
400 | }
401 |
402 | p {
403 | font-size: 13px;
404 | line-height: 1.6em;
405 | }
406 |
407 | .image {
408 | border-radius: 25vw;
409 | overflow: hidden;
410 | display: inline-block;
411 | height: 25vw;
412 | width: 25vw;
413 | max-width: 250px;
414 | max-height: 250px;
415 | background: #fff;
416 | flex-shrink: 0;
417 | margin-right: 20px;
418 | position: relative;
419 | }
420 | }
421 |
422 | }
423 |
```
--------------------------------------------------------------------------------
/content/learn/about-how.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: How AMP Works
2 | $titles:
3 | breadcrumb@: How AMP Works
4 | $order: 1
5 | class: about-how bg-triangle-secondary bg-triangle-bottom
6 | $view: /views/about-how.html
7 |
8 | components:
9 | - youtube
10 |
11 | hero:
12 | title@: How AMP Works
13 | subtitle@: "The following optimizations combined are the reason AMP pages are so fast they appear to load instantly:<p>If you'd rather listen than read, the following video by AMP engineering lead Malte Ubl gives a similar overview than the following paragraphs."
14 |
15 | video: hVRkG1CQScA
16 |
17 | points:
18 | pointlist:
19 | - title@: Execute all AMP JavaScript asynchronously
20 | description@: |
21 | JavaScript is powerful,
22 | it can modify just about every aspect of the page,
23 | but it can also block DOM construction and delay page rendering
24 | (see also [Adding interactivity with JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
25 | To keep JavaScript from delaying page rendering,
26 | AMP allows only asynchronous JavaScript.
27 | <p>AMP pages can’t include any author-written JavaScript.
28 | Instead of using JavaScript,
29 | interactive page features are handled in custom AMP elements.
30 | The custom AMP elements may have JavaScript under the hood,
31 | but they’re carefully designed to make sure they don’t cause performance degradation.
32 | <p>While third-party JS is allowed in iframes,
33 | it cannot block rendering.
34 | For example, if third-party JS uses the
35 | [super-bad-for-performance `document.write` API](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
36 | it does not block rendering the main page.
37 | - title@: Size all resources statically
38 | description@: |
39 | External resources such as images, ads or iframes must state their size in the HTML
40 | so that AMP can determine each element’s size and position before resources are downloaded.
41 | AMP loads the layout of the page without waiting for any resources to download.
42 | <p>AMP uncouples document layout from resource layout.
43 | Only one HTTP request is needed to layout the entire doc
44 | ([+fonts](#font-triggering-must-be-efficient)).
45 | Since AMP is optimized to avoid expensive style recalculations and layouts in the browser,
46 | there won’t be any re-layout when resources load.
47 | - title@: Don’t let extension mechanisms block rendering
48 | description@: |
49 | AMP doesn’t let extension mechanisms block page rendering.
50 | AMP supports extensions for things like
51 | [lightboxes](/docs/reference/extended/amp-lightbox.html),
52 | [instagram embeds](/docs/reference/extended/amp-instagram.html),
53 | [tweets](/docs/reference/extended/amp-twitter.html), etc.
54 | While these require additional HTTP requests,
55 | those requests do not block page layout and rendering.
56 | <p>Any page that uses a custom script must tell the AMP system
57 | that it will eventually have a custom tag.
58 | For example, the [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
59 | script tells the system that there will be an `amp-iframe` tag.
60 | AMP creates the iframe box before it even knows what it will include:
61 | example: /content/includes/amp-iframe.md
62 | - title@: Keep all third-party JavaScript out of the critical path
63 | description@: |
64 | Third-party JS likes to use synchronous JS loading.
65 | They also like to `document.write` more sync scripts.
66 | For example, if you have five ads on your page, and each of them cause three synchronous loads,
67 | each with a 1 second latency connection,
68 | you’re in 15 seconds of load time just for JS loading.
69 | <p>AMP pages allow third-party JavaScript but only in sandboxed iframes.
70 | By restricting them to iframes, they can’t block the execution of the main page.
71 | Even if they trigger multiple style re-calculations,
72 | their tiny iframes have very little DOM.
73 | <p>The time it takes to do style-recalculations and layouts are restricted by DOM size,
74 | so the iframe recalculations are very fast compared
75 | to recalculating styles and layout for the page.
76 | - title@: All CSS must be inline and size-bound
77 | description@: |
78 | CSS blocks all rendering, it blocks page load, and it tends to get bloated.
79 | In AMP HTML pages, only inline styles are allowed.
80 | This removes 1 or often more HTTP requests from the critical rendering path
81 | compared to most web pages.
82 | <p>Also, the inline style sheet has a maximum size of 50 kilobytes.
83 | While this size is big enough for very sophisticated pages,
84 | it still requires the page author to practice good CSS hygiene.
85 | - title@: Font triggering must be efficient
86 | id: font-triggering-must-be-efficient
87 | description@: |
88 | Web fonts are super large, so
89 | [web font optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
90 | is crucial to performance.
91 | On a typical page that has a few sync scripts and a few external style sheets,
92 | the browser waits and waits to start downloading these huge fonts until all this happens.
93 | <p>The AMP system declares zero HTTP requests until fonts start downloading.
94 | This is only possible because all JS in AMP has the async attribute
95 | and only inline style sheets are allowed;
96 | there’s no HTTP requests blocking the browser from downloading fonts.
97 | - title@: Minimize style recalculations
98 | description@: |
99 | Each time you measure something, it triggers style recalculations which are expensive
100 | because the browser has to layout the entire page.
101 | In AMP pages, all DOM reads happen first before all the writes.
102 | This ensures there’s the max of one recalc of styles per frame.
103 | <p>Learn more about impact of style and layout recalculations on
104 | [rendering performance](https://developers.google.com/web/fundamentals/performance/rendering/).
105 | - title@: Only run GPU-accelerated animations
106 | description@: |
107 | The only way to have fast optimizations is to run them on the GPU.
108 | GPU knows about layers, it knows how to perform some things on these layers,
109 | it can move them, it can fade them, but it can’t update the page layout;
110 | it will hand that task over to the browser, and that’s not good.
111 | <p>The rules for animation-related CSS ensure that animations can be GPU-accelerated.
112 | Specifically, AMP only allows animating and transitioning on transform and opacity
113 | so that page layout isn’t required.
114 | Learn more about
115 | [using transform and opacity for animation changes](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
116 | - title@: Prioritize resource loading
117 | description@: |
118 | AMP controls all resource downloads: it prioritizes resource loading,
119 | loading only what’s needed, and prefetches lazy-loaded resources.
120 | <p>When AMP downloads resources, it optimizes downloads
121 | so that the currently most important resources are downloaded first.
122 | Images and ads are only downloaded if they are likely to be seen by the user,
123 | above the fold, or if the user is likely to quickly scroll to them.
124 | <p>AMP also prefetches lazy-loaded resources.
125 | Resources are loaded as late as possible, but prefetched as early as possible.
126 | That way things load very fast but CPU is only used
127 | when resources are actually shown to users.
128 | - title@: Load pages in an instant
129 | description@: |
130 | The new [preconnect API](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
131 | is used heavily to ensure HTTP requests are as fast as possible when they are made.
132 | With this,
133 | a page can be rendered before the user explicitly states they’d like to navigate to it;
134 | the page might already be available by the time the user actually selects it,
135 | leading to instant loading.
136 | <p>While prerendering can be applied to all web content,
137 | it can also use up a lot of bandwidth and CPU. AMP is optimized to reduce both of these factors. Prerendering only downloads resources above the fold
138 | and prerendering doesn’t render things that might be expensive in terms of CPU.
139 | <p>When AMP documents get prerendered for instant loading,
140 | only resources above the fold are actually downloaded.
141 | When AMP documents get prerendered for instant loading,
142 | resources that might use a lot of CPU (like third-party iframes) do not get downloaded.
143 | <p>Learn more about
144 | [why AMP HTML doesn’t take full advantage of the preload scanner](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
145 | - title@: Help make AMP faster
146 | description@: |
147 | AMP is an open-source effort.
148 | We need your help to make AMP even faster.
149 | Learn [how to contribute](/docs/support/contribute.html).
150 |
151 |
152 | cta:
153 | title@: See what AMP can do for you
154 | link_text@: Learn who uses AMP
155 | link_url: /content/learn/who-uses-amp.yaml
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Zwiększanie wydajności przez AMP
3 | ---
4 | [TOC]
5 |
6 | Połączenie następujących optymalizacji sprawia, że strony AMP są tak szybkie i sprawiają wrażenie, że ładują się natychmiast:
7 |
8 | Jeśli wolisz słuchać niż czytać, w następującym filmie szef zespołu AMP Malte Ubl przedstawia przeglądowe informacje podobne do zamieszczonych w kolejnych akapitach.
9 |
10 | <amp-youtube
11 | data-videoid="hVRkG1CQScA"
12 | layout="responsive"
13 | width="480" height="270">
14 | </amp-youtube>
15 |
16 | ## Zezwalaj tylko na skrypty asynchroniczne
17 |
18 | Język JavaScript ma potężne możliwości,
19 | może zmodyfikować niemal każdy aspekt strony,
20 | ale może także zablokować konstrukcję modelu DOM i opóźnić renderowanie stron
21 | (zobacz też [Dodawanie interaktywności przy użyciu JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
22 | Aby uniemożliwić skryptom JavaScript opóźnianie renderowania stron,
23 | AMP zezwala wyłącznie na asynchroniczne skrypty JavaScript.
24 |
25 | Strony AMP nie mogą zawierać żadnego napisanego przez autora skryptu JavaScript.
26 | Zamiast korzystania z języka JavaScript,
27 | interaktywne funkcje stron są obsługiwane w niestandardowych elementach AMP.
28 | Niestandardowe elementy AMP mogą zawierać wewnątrz skrypt JavaScript,
29 | ale zaprojektowano je starannie w taki sposób, aby nie powodowały one pogorszenia wydajności.
30 |
31 | Chociaż skrypty JS niezależnych podmiotów są dozwolone w ramkach iframe,
32 | nie mogą one blokować renderowania.
33 | Jeśli na przykład niezależny skrypt JS używa
34 | [fatalnej dla wydajności funkcji API `document.write`](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
35 | nie blokuje ona renderowania strony głównej.
36 |
37 | ## Statycznie nadaj rozmiary wszystkim zasobom
38 |
39 | Zasoby zewnętrzne, takie jak obrazy, reklamy lub ramki iframe muszą informować o swoim rozmiarze w HTML,
40 | dzięki czemu AMP może określić rozmiar i pozycję każdego elementu przed pobraniem zasobów.
41 | AMP ładuje układ strony bez oczekiwania na pobranie jakichkolwiek zasobów.
42 |
43 | AMP rozłącza układ dokumentu od układu zasobów.
44 | Tylko jedno żądanie HTTP jest potrzebne do wyrenderowania całego dokumentu
45 | ([i czcionek](#font-triggering-must-be-efficient)).
46 | Ponieważ AMP zoptymalizowano w celu uniknięcia kosztownego przeliczania stylów i układów w przeglądarce,
47 | po załadowaniu zasobu nie ma żadnego ponownego rozmieszczania.
48 |
49 | ## Nie pozwól, aby mechanizmy rozszerzeń blokowały renderowanie
50 |
51 | AMP nie pozwala, aby mechanizmy rozszerzeń blokowały renderowanie stron.
52 | AMP obsługuje rozszerzenia dla takich obiektów jak
53 | [ramki lightbox](/docs/reference/extended/amp-lightbox.html),
54 | [umieszczone elementy z Instagrama](/docs/reference/extended/amp-instagram.html),
55 | [tweety](/docs/reference/extended/amp-twitter.html) itp.
56 | Chociaż wymagają one dodatkowych żądań HTTP,
57 | te żądania nie blokują układu strony ani renderowania.
58 |
59 | Każda strona korzystająca z niestandardowego skryptu musi poinformować system AMP,
60 | że może ona mieć niestandardowy znacznik.
61 | Na przykład skrypt [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
62 | informuje system, że w dokumencie wystąpi znacznik `amp-iframe`.
63 | AMP tworzy ramkę iframe zanim otrzyma informacje, co się w niej znajdzie:
64 |
65 | [sourcecode:html]
66 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
67 | [/sourcecode]
68 |
69 | ## Usuń wszystkie niezależne skrypty JavaScript ze ścieżki krytycznej
70 |
71 | Niezależne skrypty JS lubią korzystać z synchronicznego ładowania JS.
72 | Lubią one także korzystać z funkcji `document.write` w celu tworzenia dodatkowych skryptów synchronicznych.
73 | Jeśli na stronie jest na przykład pięć reklam i każda z nich wykonuje trzy synchroniczne operacje wczytywania
74 | z czasem oczekiwania łącza wynoszącym 1 sekundę,
75 | czas ładowania samych tylko skryptów JS wynosi 15 sekund.
76 |
77 | Strony AMP umożliwiają korzystanie z niezależnych skryptów JavaScript, ale tylko w izolowanych ramkach iframe.
78 | Wyrzucenie tych skryptów do ramek iframe pozwala wyeliminować blokowanie wykonywania strony głównej.
79 | Nawet jeśli wyzwalają one liczne przeliczenia stylów,
80 | ich niewielkie ramki iframe mają bardzo mały model DOM.
81 |
82 | Przeliczenia stylów i układów odpowiadają rozmiarowi modelu DOM,
83 | dlatego przeliczenia ramek iframe są bardzo szybkie w porównaniu
84 | z przeliczaniem stylów i układów na stronie.
85 |
86 | ## Cały CSS musi być wstawiany i powiązany z rozmiarem
87 |
88 | CSS blokuje cały rendering, blokuje ładowanie strony i ma tendencję do rozrastania się.
89 | Na stronach AMP HTML dozwolone są tylko style wstawiane.
90 | Pozwala to usnąć jedno, a często wiele żądań HTTP z krytycznej ścieżki renderowania
91 | w porównaniu z większością stron internetowych.
92 |
93 | Ponadto wstawiany arkusz stylów ma rozmiar maksymalny 50 kilobajtów.
94 | Chociaż taki rozmiar pozwala na tworzenie bardzo wyrafinowanych stron,
95 | wymaga on również od autora zachowania zasad „higieny CSS”.
96 |
97 | ## Wyzwalanie czcionek musi być efektywne
98 |
99 | Czcionki internetowe są bardzo duże, dlatego
100 | [optymalizacja czcionek internetowych](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
101 | ma kluczowe znaczenie dla wydajności.
102 | Na typowej stronie z kilkoma skryptami synchronicznymi i kilkoma zewnętrznymi arkuszami stylów,
103 | przeglądarka czeka i czeka na rozpoczęcie pobierania tych olbrzymich czcionek, aż to wszystko się wydarzy.
104 |
105 | System AMP deklaruje zero żądań HTTP, dopóki nie rozpocznie się pobieranie czcionek.
106 | Jest to możliwe tylko dlatego, że cały kod JS w AMP ma atrybut async
107 | i dozwolone są tylko style wstawiane;
108 | nie ma żądań HTTP blokujących pobieranie czcionek przez przeglądarkę.
109 |
110 | ## Minimalizuj przeliczanie stylów
111 |
112 | Podczas każdego pomiaru wyzwalane jest przeliczanie stylów, które jest kosztowne,
113 | ponieważ przeglądarka musi rozmieścić całą stronę.
114 | Na stronach AMP wszystkie odczyty DOM wydarzają się przed wszystkimi zapisami.
115 | Dzięki temu na każdą ramkę przypada maksymalnie jedno przeliczenie stylów.
116 |
117 | Dowiedz się więcej o wpływie przeliczeń stylów i układów na
118 | [wydajność renderowania](https://developers.google.com/web/fundamentals/performance/rendering/).
119 |
120 | ## Uruchamiaj tylko animacje z akceleracją sprzętową GPU
121 |
122 | Jedyną metodą przyspieszenia animacji jest uruchamianie ich na procesorze graficznym (GPU).
123 | Procesor GPU ma informacje o warstwach, obsługuje wykonywanie operacji na tych warstwach,
124 | może je przenosić, może je wygaszać, ale nie może zaktualizować układu strony;
125 | przekaże to zadanie do przeglądarki, a to nie jest pożądane.
126 |
127 | Reguły dla arkuszy stylów CSS powiązanych z animacjami zapewniają możliwość przyspieszania animacji przez procesor GPU.
128 | W szczególności tylko AMP zezwala na animację i przejście dla transformacji i przezroczystości
129 | , dzięki czemu ponowne rozmieszczenie strony nie jest wymagane.
130 | Dowiedz się więcej o
131 | [używaniu transformacji i przezroczystości dla zmian animacji](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
132 |
133 | ## Ustal priorytety ładowania zasobów
134 |
135 | AMP steruje pobieraniem wszystkich zasobów i ustala priorytety ładowania zasobów,
136 | ładując tylko to, co potrzebne i pobierając z wyprzedzeniem zasoby ładowane z opóźnieniem.
137 |
138 | Kiedy AMP pobiera zasoby, optymalizuje operacje pobierania
139 | w taki sposób, aby najważniejsze zasoby były pobierane jako pierwsze.
140 | Obrazy i reklamy są pobierane tylko wtedy, kiedy jest prawdopodobne, że zostaną zobaczone przez użytkownika,
141 | w części strony widocznej na ekranie lub jeśli jest prawdopodobne, że użytkownik szybko przewinie do nich.
142 |
143 | AMP pobiera także z wyprzedzeniem zasoby ładowane z opóźnieniem.
144 | Zasoby są ładowane tak późno, jak to możliwe, ale pobierane z wyprzedzeniem tak wcześnie, jak to możliwe.
145 | Dzięki temu strony ładują się bardzo szybko, ale procesor jest używany tylko wtedy,
146 | gdy zasoby są rzeczywiście wyświetlane dla użytkowników.
147 |
148 | ## Ładuj strony w mgnieniu oka
149 |
150 | Nowa [funkcja API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
151 | jest intensywnie używana w celu zapewnienia maksymalnej możliwej szybkości żądań HTTP w momencie ich wysyłania.
152 | Dzięki temu
153 | strona może zostać wyrenderowana zanim jeszcze użytkownik jawnie zadeklaruje chęć przejścia do niej;
154 | strona może być już dostępna, kiedy użytkownik rzeczywiście wybierze ją,
155 | dzięki czemu ładowanie nastąpi błyskawicznie.
156 |
157 | Chociaż renderowanie z wyprzedzeniem można zastosować do wszystkich treści internetowych,
158 | może ono w znacznym stopniu wykorzystać przepustowość i czas procesora. AMP zoptymalizowano z myślą o ograniczeniu tych dwóch czynników. W ramach renderowania z wyprzedzeniem pobierane są tylko zasoby w części strony widocznej na ekranie
159 | i nie obejmuje ono elementów, których wyrenderowanie byłoby kosztowne w aspekcie wykorzystania procesora.
160 |
161 | Kiedy dokumenty AMP są renderowane z wyprzedzeniem w celu błyskawicznego ładowania,
162 | faktycznie pobierane są tylko zasoby w części strony widocznej na ekranie.
163 | Podczas renderowania z wyprzedzeniem dokumentów AMP w celu błyskawicznego ładowania
164 | nie są pobierane zasoby, które mogłyby znacząco obciążyć procesor (jak np. ramki iframe niezależnych dostawców).
165 |
166 | Dowiedz się więcej,
167 | [dlaczego AMP HTML nie wykorzystuje w pełni skanera wczytywania z wyprzedzeniem](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
168 |
169 | ## Pomóż przyspieszyć AMP
170 | AMP to projekt Open Source.
171 | Potrzebujemy Twojej pomocy, aby jeszcze bardziej przyspieszyć AMP.
172 | Dowiedz się, [jak dodać własne materiały](/docs/support/contribute.html).
173 |
```