This is page 11 of 20. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?lines=false&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/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Obsługa CSS
---
Tak jak wszystkie strony internetowe, strony AMP korzystają ze stylów CSS,
jednak nie obsługują arkuszy zewnętrznych
(z wyjątkiem [czcionek niestandardowych](#the-custom-fonts-exception)).
Niedozwolone są również określone style z powodu ograniczeń wydajnościowych;
wbudowywanie atrybutów stylów w tekst nie jest dozwolone.
Wszystkie style muszą być zawarte w nagłówku dokumentu
(przeczytaj artykuł [Dodawanie stylów do strony](/docs/guides/validate.html#add-styles-to-a-page)).
Jednak by lepiej zarządzać treścią, do tworzenia stron statycznych możesz używać szablonów oraz preprocesorów CSS.
**Uwaga:**
komponenty AMP zawierają style domyślne,
ułatwiając projektowanie elastycznych stron internetowych.
Te style są definiowane w pliku
[`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
[TOC]
## Korzystanie z preprocesorów CSS
Obsługa preprocesorów w przypadku AMP wygląda tak samo, jak w przypadku innych stron internetowych.
Na przykład witryna [ampproject.org](https://www.ampproject.org/) korzysta z preprocesora
[Sass](http://sass-lang.com/).
(Do tworzenia statycznych stron AMP, z których składa się witryna [ampproject.org](https://www.ampproject.org/), używamy generatora [Grow](http://grow.io/).
Podczas korzystania z preprocesorów zwróć szczególną uwagę na zasoby – umieszczaj tylko te, z których korzysta strona.
Na przykład [head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html) zawiera wszystkie wymagane znaczniki AMP oraz wbudowane w tekst style CSS z plików źródłowych `*.scss`.
Zawiera również, między innymi, element niestandardowy skryptu dla
[`amp-youtube`](/docs/reference/extended/amp-youtube.html). Dzięki temu na wielu stronach tej witryny można umieścić filmy z YouTube.
[sourcecode:html] {% raw %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<title>Accelerated Mobile Pages Project</title>
<link rel="shortcut icon" href="/static/img/amp_favicon.png">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
{% endraw %} [/sourcecode]
Aby zobaczyć, jak powyższy kod przekłada się na sformatowany dokument AMP HTML, wyświetl kod źródłowy dowolnej strony w [ampproject.org](https://www.ampproject.org/).
(W Chrome kliknij prawym przyciskiem myszy i wybierz `Wyświetl źródło strony`).
## Niedozwolone style
Poniższe style nie są dozwolone na stronach AMP:
<table>
<thead>
<tr>
<th data-th="Banned style">Niedozwolony styl</th>
<th data-th="Description">Opis</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Banned style">Wbudowane atrybuty stylów</td>
<td data-th="Description">Wszystkie style muszą być zdefiniowane w sekcji <code><head></code> strony,
wewnątrz tagu <code><style amp-custom></code>.</td>
</tr>
<tr>
<td data-th="Banned style"><code>!</code>ważny kwalifikator </td>
<td data-th="Description">Użycie niedozwolone.
Jest to niezbędny wymóg umożliwiający standardowi AMP narzucanie własnych reguł dotyczących rozmiarów elementów.</td>
</tr>
<tr>
<td data-th="Banned style"><code><link rel=”stylesheet”></code></td>
<td data-th="Description">Zabroniony z wyjątkiem [czcionek niestandardowych](#the-custom-fonts-exception).</td>
</tr>
<tr>
<td data-th="Banned style"><code>*</code> (selektor uniwersalny)</td>
<td data-th="Description">Obniża wydajność i może służyć
do obchodzenia innych ograniczeń dotyczących selektorów.</td>
</tr>
<tr>
<td data-th="Banned style"><code>:not()</code></td>
<td data-th="Description">Można go używać do symulowania selektora uniwersalnego.</td>
</tr>
<tr>
<td data-th="Banned style">Pseudoselektory, pseudoklasy i pseudoelementy</td>
<td data-th="Description">Pseudoselektory, pseudoklasy i pseudoelementy są dozwolone tylko
w przypadku selektorów zawierających nazwy tagów. Nazwy te nie mogą się rozpoczynać ciągiem znaków <code>amp-</code>.
Zapis poprawny: <code>a:hover, div:last-of-type</code>
Zapis niepoprawny: <code>amp-img:hover, amp-img:last-of-type</code></td>
</tr>
<tr>
<td data-th="Banned style">Klasa <code>-amp-</code> i nazwy tagów <code>i-amp-</code></td>
<td data-th="Description">Nazwy klas w autorskich arkuszach stylów nie mogą się rozpoczynać ciągiem znaków <code>-amp-</code>. Są one zarezerwowane do użytku wewnętrznego przez standard AMP. Z tego powodu arkusze stylów użytkownika nie mogą wskazywać selektorów CSS dla klas <code>-amp-</code> ani tagów <code>i-amp</code>.</td>
</tr>
<tr>
<td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
<td data-th="Description">Korzystanie z tych właściwości nie jest dozwolone
ze względów bezpieczeństwa.</td>
</tr>
<tr>
<td data-th="Banned style"><code>filter</code></td>
<td data-th="Description">Niedozwolony z uwagi na problemy z szybkością.</td>
</tr>
</tbody>
</table>
## Dozwolone właściwości przenoszenia i animacji
Standard AMP umożliwia tylko przenoszenia oraz animacje właściwości, które można przyspieszyć w większości przeglądarek za pomocą GPU.
W projekcie AMP obecnie dozwolone są właściwości `opacity`, `transform`,
i `-vendorPrefix-transform`.
W poniższych przykładach atrybut `<property>` musi się znajdować na białej liście:
* `transition <property> (Also -vendorPrefix-transition)`
* @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
Właściwość `overflow` (oraz `overflow-y`, `overflow-x`)
nie mogą funkcjonować jako “auto” lub “scroll”.
Żaden definiowany przez użytkownika element dokumentu AMP nie może mieć paska przewijania.
## Wyjątek – niestandardowe czcionki
Strony AMP nie mogą zawierać zewnętrznych arkuszy stylów, z wyjątkiem niestandardowych czcionek.
Dwie obsługiwane metody obsługi niestandardowych czcionek
to tagi link wskazujące dostawców dozwolonych czcionek i zastosowanie atrybutu `@font-face`.
Dostawcy czcionek mogą być na białej liście,
tylko jeśli obsługują integracje CSS i korzystają z protokołu HTTPS.
Obecnie tylko następujący dostawcy są dozwoleni
i mogą serwować czcionki za pomocą tagów linków:
* [https://fast.fonts.net](https://fast.fonts.net)
* [https://fonts.googleapis.com](https://fonts.googleapis.com)
Przykładowy tag link wskazujący dozwolonego dostawcę czcionek, Google Fonts:
[sourcecode:html]
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]
Można też użyć atrybutu [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).
Czcionki wykorzystane za pomocą atrybutu `@font-face` należy pobierać za pomocą protokołu HTTP lub HTTPS.
```
--------------------------------------------------------------------------------
/content/learn/how-amp-works@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Como o AMP acelera o desempenho
---
[TOC]
Combinadas, as otimizações a seguir são a razão das páginas AMP serem tão rápidas que parecem carregar instantaneamente:
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.
<amp-youtube
data-videoid="hVRkG1CQScA"
layout="responsive"
width="480" height="270">
</amp-youtube>
## Permitir apenas scripts assíncronos
O JavaScript é uma ferramenta eficaz,
que pode modificar praticamente todos os aspectos da página,
mas também pode bloquear uma construção em DOM e atrasar a renderização da página
(veja também [Adicionar interatividade com o JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Para evitar que o JavaScript atrase a renderização da página,
o AMP permite apenas o JavaScript assíncrono.
Páginas AMP não podem incluir JavaScript escrito pelo autor.
Em vez de usar JavaScript,
os recursos interativos da página são processados em elementos AMP personalizados.
Os elementos AMP personalizados podem incluir JavaScript,
mas são projetados cuidadosamente para garantir que não atrapalhem o desempenho.
Embora JS de terceiros seja permitido nos iframes,
ele não pode bloquear a renderização.
Por exemplo, se o JS de terceiros usar a
[API `document.write` muito prejudicial para o desempenho](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
ela não bloqueará a renderização da página principal.
## Dimensionar todos os recursos estaticamente
Recursos externos, como imagens, anúncios ou iframes, devem informar seu tamanho no HTML
para que o AMP possa determinar o tamanho e a posição de cada elemento antes de que seja feito o download dos recursos.
O AMP carrega o layout da página sem esperar que seja feito o download dos recursos.
O AMP separa o layout do documento do layout do recurso.
Apenas uma solicitação HTTP é necessária para se ter o layout do documento inteiro
([+fontes](#font-triggering-must-be-efficient)).
Como o AMP é otimizado para evitar recálculos de estilo e layouts pesados no navegador,
o layout não será recriado quando os recursos forem carregados.
## Não permitir que mecanismos de extensões bloqueiem a renderização
O AMP não permite que mecanismos de extensões bloqueiem a renderização da página.
O AMP oferece suporte a extensões para itens como
[efeitos Lightbox](/docs/reference/extended/amp-lightbox.html),
[incorporações do Instagram](/docs/reference/extended/amp-instagram.html),
[tweets](/docs/reference/extended/amp-twitter.html) etc.
Embora eles precisem de solicitações HTTP adicionais,
essas solicitações não bloqueiam o layout e a renderização da página.
Qualquer página que use um script personalizado deve informar ao sistema AMP
que ela futuramente terá uma tag personalizada.
Por exemplo, o script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
informa ao sistema que haverá uma tag `amp-iframe`.
O AMP cria a caixa de iframe antes mesmo de saber o que ela incluirá:
[sourcecode:html]
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
## Remover qualquer JavaScript de terceiros do caminho essencial
JS de terceiros costuma usar o carregamento síncrono de JS.
Eles também gostam de `document.write` mais scripts síncronos.
Por exemplo, se tiver cinco anúncios e cada um realizar três carregamentos de sincronização
em uma conexão com 1 segundo de latência,
você terá 15 segundos de carregamento apenas para carregar o JS.
As páginas AMP permitem o uso de JavaScript de terceiros, mas apenas em iframes com sandbox.
Ao serem restritos a iframes, eles não podem bloquear a execução da página principal.
Mesmo que façam com que o estilo seja recalculado várias vezes,
seus iframes pequenos contêm muito pouco DOM.
Recálculos de estilos e layouts são típicos para o tamanho de DOM,
então os recálculos de iframe são muito rápidos em comparação
a um recálculo de estilos e layout para a página.
## Qualquer CSS deve ser inline e de tamanho limitado
O CSS bloqueia toda a renderização, bloqueia o carregamento da página e costuma ser excessivo.
Nas páginas AMP HTML, apenas estilos inline são permitidos.
Isso remove uma ou até mais solicitações HTTP do caminho essencial de renderização
em comparação com a maioria das páginas da Web.
Além disso, a folha de estilo inline deve ter um tamanho máximo de 50 kilobytes.
Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas,
ele ainda exige que o autor da página otimize o CSS.
## O acionamento de fontes deve ser eficiente
As fontes da Web são muito grandes, então uma
[otimização de fontes da Web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
é essencial para o desempenho.
Em uma página comum, com poucos scripts de sincronização e poucas folhas de estilo externas,
o navegador fica esperando para começar a fazer o download dessas fontes enormes até que tudo isso aconteça.
O sistema AMP declara zero solicitação HTTP até que comece o download das fontes.
Isso só é possível porque todo JS em AMP tem o atributo de sincronização
e apenas folhas de estilo inline são permitidas;
nenhuma solicitação HTTP impede que o navegador faça o download das fontes.
## Minimizar os recálculos de estilo
Cada vez que você mede algo, recálculos de estilo são acionados, o que é pesado,
pois o navegador precisa refazer o layout da página inteira.
Nas páginas AMP, todas as leituras de DOM são realizadas primeiro, antes de todas as gravações.
Isso garante que ocorra, no máximo, um recálculo de estilos por frame.
Saiba mais sobre o impacto dos recálculos de estilo e layout em
[desempenho de renderização](https://developers.google.com/web/fundamentals/performance/rendering/).
## Executar apenas animações aceleradas por GPU
A única maneira de ter otimizações rápidas é executá-las na GPU.
A GPU entende camadas, sabe como realizar atividades nessas camadas,
pode movê-las, pode desvanecê-las, mas não pode atualizar o layout da página;
ela passa essa tarefa para o navegador e isso não é bom.
As regras para CSS relacionado a animações garantem que as animações possam ser aceleradas pela GPU.
Especificamente, o AMP permite animação e transição apenas em transform e opacity
para que o layout da página não seja necessário.
Saiba mais sobre como
[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).
## Priorizar o carregamento de recursos
O AMP controla todos os downloads de recursos: ele prioriza o carregamento de recursos,
carregando apenas o necessário, e realiza a pré-busca de recursos de carregamento lento.
Quando o AMP baixa recursos, ele otimiza os downloads
para que se faça primeiro o download dos recursos mais importantes no momento.
Somente é feito o download de imagens e anúncios quando forem ser vistos pelo usuário,
vistos acima da dobra ou se for provável que o usuário chegue a eles rapidamente.
O AMP também realiza a pré-busca de recursos de carregamento lento.
Os recursos são carregados o mais tarde possível, mas a pré-busca é feita assim que possível.
Dessa forma, tudo é carregado muito rapidamente, mas a CPU só é usada
quando os recursos são exibidos aos usuários.
## Carregar páginas em um instante
A nova [preconnect API](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
é muito usada para garantir que as solicitações HTTP sejam tão rápidas quanto possível ao serem feitas.
Assim,
uma página pode ser renderizada antes de o usuário informar explicitamente que deseja navegar até ela;
a página pode já estar disponível quando o usuário a selecionar,
fazendo com que o carregamento seja instantâneo.
Embora a pré-renderização possa ser aplicada a todo o conteúdo Web,
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
e não renderiza itens que possam ser pesados em termos de uso de CPU.
Quando documentos AMP são pré-renderizados para carregamento instantâneo,
somente é feito o download dos recursos acima da dobra.
Quando documentos AMP são pré-renderizados para carregamento instantâneo,
não é feito o download de recursos que podem usar muitos recursos de CPU (como iframes de terceiros).
Saiba mais sobre
[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).
## Ajude a tornar o AMP mais rápido
AMP é um esforço de código aberto.
Precisamos da sua ajuda para deixá-lo ainda mais rápido.
Saiba [como contribuir](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/style_pages@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: CSS compatível
---
Como todas as páginas da Web, as páginas AMP são estilizadas com CSS,
mas não é possível fazer referência a folhas de estilo externas
(com exceção de [fontes personalizadas](#the-custom-fonts-exception)).
Além disso, certos estilos não são permitidos devido a implicações de desempenho.
Os atributos de estilo in-line não são permitidos.
Todos os estilos devem estar no cabeçalho do documento
(leia [Adicionar estilos a uma página](/docs/guides/validate.html#add-styles-to-a-page)).
Contudo, você pode usar pré-processadores e modelos CSS para criar páginas estáticas
e gerenciar melhor seu conteúdo.
**Observação:**
Os componentes da AMP vêm com estilos padrão
para tornar razoavelmente fácil a criação das páginas responsivas.
Esses estilos estão definidos na [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
[TOC]
## Uso de pré-processadores CSS
O resultado gerado pelos pré-processadores funciona na AMP tão bem como em qualquer outra página da Web.
Por exemplo, o site [ampproject.org](https://www.ampproject.org/) usa
[Sass](http://sass-lang.com/).
Nós usamos <a href="http://grow.io/">Grow</a> para criar as páginas AMP estáticas
que compõem o site [ampproject.org](https://www.ampproject.org/).
Ao usar os pré-processadores,
dê atenção especial ao que será incluído: carregue apenas o que as suas páginas usam.
Por exemplo, [head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html)
inclui toda a marcação de AMP necessária e a CSS in-line dos arquivos de origem `*.scss`.
Ele também inclui o script do elemento personalizado para
[`amp-youtube`](/docs/reference/extended/amp-youtube.html), entre outros,
de modo que muitas páginas em todo o site podem incluir vídeos incorporados do YouTube.
[sourcecode:html] {% raw %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<title>Accelerated Mobile Pages Project</title>
<link rel="shortcut icon" href="/static/img/amp_favicon.png">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
{% endraw %} [/sourcecode]
Para ver como o conteúdo acima se traduz em um HTML de AMP formatado,
veja o código-fonte de qualquer página em [ampproject.org](https://www.ampproject.org/).
No Google Chrome, clique com o botão direito e selecione `Exibir código-fonte da página`.
## Estilos não permitidos
Os seguintes estilos não são permitidos em páginas AMP:
<table>
<thead>
<tr>
<th data-th="Banned style">Estilo proibido</th>
<th data-th="Description">Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Banned style">Atributos de estilo in-line</td>
<td data-th="Description">Todos os estilos devem ser definidos no <code><head></code> da página,
dentro de uma tag <code><style amp-custom></code>.</td>
</tr>
<tr>
<td data-th="Banned style"><code>!</code>qualificador importante </td>
<td data-th="Description">Uso não permitido.
Este é um requisito necessário para permitir que a AMP coloque em vigor suas regras de dimensionamento de elementos.</td>
</tr>
<tr>
<td data-th="Banned style"><code><link rel=”stylesheet”></code></td>
<td data-th="Description">Não permitido, com exceção de <a href="#the-custom-fonts-exception">fontes personalizadas</a>.</td>
</tr>
<tr>
<td data-th="Banned style"><code>*</code> (seletor universal)</td>
<td data-th="Description">Implicações de desempenho negativo e poderia ser usado
para violar outras restrições de seletor.</td>
</tr>
<tr>
<td data-th="Banned style"><code>:not()</code></td>
<td data-th="Description">Poderia ser usado para simular o seletor universal.</td>
</tr>
<tr>
<td data-th="Banned style">Pseudosseletores, pseudoclasses e pseudoelementos</td>
<td data-th="Description">Pseudosseletores, pseudoclasses e pseudoelementos só são permitidos
em seletores que contêm nomes de tags. Esses nomes de tags não podem iniciar com <code>amp-</code>.
Exemplo correto: <code>a:hover, div:last-of-type</code>
Exemplo incorreto: <code>amp-img:hover, amp-img:last-of-type</code></td>
</tr>
<tr>
<td data-th="Banned style">Classe <code>-amp-</code> e nomes de tags com <code>i-amp-</code></td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
<td data-th="Description">Estas propriedades não são permitidas
por razões de segurança.</td>
</tr>
<tr>
<td data-th="Banned style"><code>filter</code></td>
<td data-th="Description">O elemento é adicionado à lista negra devido a preocupações de desempenho.</td>
</tr>
</tbody>
</table>
## Propriedades de transição e animação na lista de permissões
A AMP só permite transições e animações de propriedades
que podem ser aceleradas por GPU em navegadores comuns.
No momento, a lista de permissões do projeto de AMP inclui `opacity`, `transform`
e `-vendorPrefix-transform`.
Nos exemplos a seguir, `<property>` precisa estar na lista de permissões.
* `transition <property> (Also -vendorPrefix-transition)`
* @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
A propriedade `overflow` (incluindo `overflow-y` e `overflow-x`)
não pode ser estilizada como “auto” nem “scroll”.
Nenhum elemento definido pelo usuário em um documento de AMP pode ter uma barra de rolagem.
## A exceção das fontes personalizadas
As páginas AMP não podem incluir folhas de estilo externas, com exceção de fontes personalizadas.
Os dois métodos compatíveis para a referência a fontes personalizadas são
as tags de links que levam a fornecedores de fontes na lista de permissões e a inclusão de `@font-face`.
Os fornecedores de fontes só serão colocados na lista de permissões
se oferecerem suporte a integrações "somente CSS" e veicularem por HTTPS.
Atualmente, apenas estas origens estão na lista de permissões
e podem veicular fontes via tags de link:
* [https://fast.fonts.net](https://fast.fonts.net)
* [https://fonts.googleapis.com](https://fonts.googleapis.com)
Exemplo de tag de link que leva ao fornecedor de fontes na lista de permissões, o Google Fonts:
[sourcecode:html]
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]
Como alternativa, use [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).
As fontes incluídas via `@font-face` devem ser buscadas
por meio do esquema HTTP ou HTTPS.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Desteklenen CSS
---
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.
Ayrıca, performans üzerindeki etkilerinden dolayı belirli stillere izin verilmez; satır içi stil özniteliklerine izin verilmemektedir.
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)).
Ancak, içeriğinizi daha iyi yönetmek amacıyla statik sayfalar oluşturmak için CSS ön işlemcilerini ve şablonlarını kullanabilirsiniz.
**Not:** Duyarlı sayfaları yazmayı makul bir düzeyde kolaylaştırmak için AMP bileşenleri varsayılan stillerle birlikte gelir.
Bu stiller, [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css) içinde tanımlanır.
[TOC]
## CSS ön işlemcilerini kullanma
Ön işlemcilerin oluşturduğu çıktı, diğer web sayfalarında olduğu gibi AMP'de sorunsuz bir şekilde çalışır.
Örneğin, [ampproject.org](https://www.ampproject.org/) sitesi [Sass](http://sass-lang.com/)'ı kullanır.
([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.)
Ön işlemcileri kullanırken neleri eklediğinize ayrıca dikkat etmeniz gerekir; yalnızca sayfalarınızın kullandığı öğeleri ekleyin.
Ö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.
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.
[sourcecode:html] {% raw %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<title>Accelerated Mobile Pages Project</title>
<link rel="shortcut icon" href="/static/img/amp_favicon.png">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
{% endraw %} [/sourcecode]
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.
(Chrome'da sağ tıklayın ve `Sayfa Kaynağını Görüntüle`'yi seçin.)
## İzin verilmeyen stiller
Aşağıdaki stillere AMP sayfalarında izin verilmez:
<table>
<thead>
<tr>
<th data-th="Banned style">Yasaklanan stil</th>
<th data-th="Description">Açıklama</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Banned style">Satır içi stil öznitelikleri</td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>!</code>önemli niteleyici </td>
<td data-th="Description">Kullanımına izin verilmez.
Bu, AMP'nin öğe boyutlandırma kurallarını uygulamasını sağlama açısından önemli bir gereksinimdir.</td>
</tr>
<tr>
<td data-th="Banned style"><code><link rel=”stylesheet”></code></td>
<td data-th="Description"><a href="#the-custom-fonts-exception">Özel yazı tipleri</a> istisnasıyla izin verilmez.</td>
</tr>
<tr>
<td data-th="Banned style"><code>*</code> (evrensel seçici)</td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>:not()</code></td>
<td data-th="Description">Evrensel seçiciyi simüle etmek için kullanılabilir.</td>
</tr>
<tr>
<td data-th="Banned style">Sözde seçiciler, sözde sınıflar ve sözde öğeler</td>
<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.
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>
</tr>
<tr>
<td data-th="Banned style"><code>-amp-</code> sınıfı ve <code>i-amp-</code> etiket adları</td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
<td data-th="Description">Bu özelliklere güvenlik nedeniyle izin verilmez.</td>
</tr>
<tr>
<td data-th="Banned style"><code>filter</code></td>
<td data-th="Description">Performansla ilgili kaygılardan dolayı kara listeye alınmıştır.</td>
</tr>
</tbody>
</table>
## Beyaz listedeki geçiş ve animasyon özellikleri
AMP yalnızca yaygın kullanılan tarayıcılarda GPU hızlandırmalı olabilecek geçiş ve animasyon özelliklerine izin verir.
AMP projesi şu anda `opacity`, `transform` ve `-vendorPrefix-transform` özelliklerini beyaz listeye almıştır.
Aşağıdaki örneklerde, `<property>` etiketinin beyaz listede olması gerekir:
* `transition <property> (Also -vendorPrefix-transition)`
* @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
`overflow` özelliğinin (ve `overflow-y`, `overflow-x`) stili <span class="notranslate">“auto”</span> veya <span class="notranslate">“scroll”</span> olarak belirlenemez.
AMP dokümanlarında hiçbir kullanıcı tanımlı öğenin kaydırma çubuğu olamaz.
## Özel yazı tipleri istisnası
AMP sayfaları harici stil sayfaları içeremez. Bunun tek istisnası özel yazı tipleridir.
Ö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.
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:
* [https://fast.fonts.net](https://fast.fonts.net)
* [https://fonts.googleapis.com](https://fonts.googleapis.com)
Beyaz listedeki Google Fonts yazı tipi sağlayıcısını işaret eden örnek bağlantı etiketi:
[sourcecode:html]
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]
Alternatif olarak, [`@font-face`](https://developer.mozilla.org/tr/docs/Web/CSS/%40font-face) öğesini kullanabilirsiniz.
`@font-face` aracılığıyla dahil edilen yazı tipleri, HTTP veya HTTPS şeması aracılığıyla getirilmelidir.
```
--------------------------------------------------------------------------------
/content/pages/amp-conf-2017.html:
--------------------------------------------------------------------------------
```html
---
$title: AMP Conf 2017
noglobalnote: 1
class: amp-conf
components:
- iframe
stylesheet: pages/amp-conf.css
---
{% set conf = g.doc('/content/includes/amp-conf-2017.yaml', locale=doc.locale) %}
<section class="teaser amp-conf-section">
<h2>
AMP Conf
</h2>
<p>
<span><strong>March 7/8</strong> in NYC.</span>
<span><strong>14</strong> Talks.</span>
<span><strong>5</strong> Panels.</span>
<span>Live-streamed.</span>
</p>
</section>
<section class="description amp-conf-section">
<p>
<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>
<a href="{{conf.registration_link}}" class="reserve-button">Join the waitlist</a>
</p>
<ul>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#speakers">Speakers</a></li>
<li><a href="#workshops">Workshops</a></li>
<li><a href="#location">Location</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</section>
<section class="schedule amp-conf-section">
<div class="wrapper">
<h3 id="schedule">Schedule</h3>
<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>
{% macro render_session(item) -%}
{% if conf.speakers[item.speaker] %}
<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>
{% endif %}
{% if item.speakers %}
{% for speaker in item.speakers if conf.speakers[speaker] %}
<span class="image multiple">{% if conf.speakers[speaker].pic %}<amp-img src="{{ conf.speakers[speaker].pic }}" width="60" height="60"></amp-img>{% endif %}</span>
{% endfor %}
{% endif %}
<time>{{ item.time }}</time>
<div>
<h5 class="{{ item.type }}">{{ item.title }}</h5>
{% if conf.speakers[item.speaker] %}
<small><a href="#{{ item.speaker }}">{{ conf.speakers[item.speaker].name }}, {{ conf.speakers[item.speaker].company }}</a></small>
{% endif %}
{% if item.speakers %}
{% if conf.speakers[item.moderator] %}
<small><a href="#{{ item.moderator }}">{{ conf.speakers[item.moderator].name }}, {{ conf.speakers[item.moderator].company }} (Moderator)</a></small>
{% endif %}
{% for speaker in item.speakers %}
{% if conf.speakers[speaker] %}
<small><a href="#{{ speaker }}">{{ conf.speakers[speaker].name }}, {{ conf.speakers[speaker].company }}</a></small>
{% endif %}
{% endfor %}
{% endif %}
{% if item.description %}
<p>{{ item.description }}</p>
{% endif %}
{% if item.workshops %}
<ul class="workshops">
{% for workshop in item.workshops %}
<li>
<h6>{{ workshop.title }}</h6>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{%- endmacro %}
<div class="tabs">
</div>
<div class="days">
<div class="day">
<h4>March 7th</h4>
<ul class="schedule">
{% for item in conf.agenda.day_1 %}
<li class="{{ item.type }}">
{{ render_session(item) }}
</li>
{% endfor %}
</ul>
</div>
<div class="day">
<h4>March 8th</h4>
<ul class="schedule">
{% for item in conf.agenda.day_2 %}
<li class="{{ item.type }}">
{{ render_session(item) }}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</section>
<section class="speakers amp-conf-section">
<div class="wrapper">
<h3 id="speakers">Speakers</h3>
<ul class="speakers">
{% set sortedSpeakers = conf.speakers|sort %}
{% for speaker in sortedSpeakers if conf.speakers[speaker].bio %}
<li>
<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>
<div>
<h4 id="{{ speaker }}">{{ conf.speakers[speaker].name }}, {{ conf.speakers[speaker].company }}</h4>
<p>{{ conf.speakers[speaker].bio|markdown|safe }}</p>
</div>
</li>
{% endfor %}
</ul>
</div>
</section>
<section class="workshops amp-conf-section">
<div class="wrapper">
<h3 id="workshops">Workshops</h3>
<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>
{% for item in conf.agenda.day_2 if item.workshops %}
<ul class="workshops">
{% for workshop in item.workshops %}
<li>
<h6>{{ workshop.title }}</h6>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</section>
<section class="location amp-conf-section">
<div class="wrapper">
<amp-iframe width=300 height=300
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
layout="responsive"
frameborder="0"
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">
<p placeholder>Loading..</p>
</amp-iframe>
<div>
<h3 id="location">Location</h3>
<p>Tribeca 360 (<a href="http://threesixtynyc.com/">Website</a>, <a href="https://goo.gl/maps/gmo8t5yxDot">Google Maps</a>).</p>
<h3>Address</h3>
<p>
<span>10 Desbrosses St</span>
<span>New York, NY 10013</span>
</p>
<h3>Live Stream</h3>
<p>Coming soon!</p>
</div>
</div>
</section>
<section class="faq amp-conf-section">
<div class="wrapper">
<h3 id="faq">Frequently Asked Questions</h3>
<dl>
<dt>Does it cost anything?</dt>
<dd>No - tickets are free of charge.</dd>
<dt>Do I have to register for the live-stream?</dt>
<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>
<dt>Who is the event for?</dt>
<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>
<dt>Does reserving a spot mean I am signed up?</dt>
<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>
<dt>When will I hear back if I have a spot?</dt>
<dd>We'll try to confirm you within less than a week!</dd>
<dt>What determines if I have a spot?</dt>
<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>
<dt>When will the schedule be announced?</dt>
<dd>We'll announce a detailed schedule before end of January.</dd>
</dl>
</div>
</section>
<section class="footer amp-conf-section">
<ul>
<li><a href="/amp-conf-2017/code-of-conduct">Code of Conduct</a></li>
<li><a href="/amp-conf-2017/accessibility">Accessibility</a></li>
<li><a href="mailto:[email protected]">Contact</a></li>
</ul>
</section>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: CSS compatibles
---
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
(con la excepción de las [fuentes personalizadas](#la-excepcion-de-las-fuentes-personalizadas)).
También hay ciertos estilos que no están permitidos por cuestiones de rendimiento;
los atributos de estilo insertados no están permitidos.
Todos los estilos deben encontrarse en el encabezado del documento
(consulta [Añadir estilos a una página](/docs/guides/validate.html#add-styles-to-a-page)).
Pero se pueden utilizar preprocesadores de CSS y plantillas para crear páginas estáticas
y así administrar mejor el contenido.
**Nota:**
Los componentes de AMP vienen con estilos predeterminados
para facilitar la autoría de las páginas adaptables de forma razonable.
Estos estilos se definen en
[`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
[TOC]
## Usar preprocesadores de CSS
La salida generada por los preprocesadores funciona tan bien en AMP como en cualquier otra página web.
Por ejemplo, para el sitio de [ampproject.org](https://www.ampproject.org/) se utiliza
[Sass](http://sass-lang.com/).
(Utilizamos [Grow](http://grow.io/) para construir las páginas estáticas de AMP
que conforman el sitio de [ampproject.org](https://www.ampproject.org/)).
Cuando se utilizan preprocesadores,
se debe prestar especial atención a lo que se incluye, y cargar solo lo que utilicen las páginas.
Por ejemplo,
[head.html](https://github.com/ampproject/docs/blob/master/views/partials/head.html)
incluye todas las marcas de AMP y el CSS insertado de los archivos de origen `*.scss`.
También incluye la secuencia de comandos de elemento personalizado para
[`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.
[sourcecode:html] {% raw %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<title>Accelerated Mobile Pages Project</title>
<link rel="shortcut icon" href="/static/img/amp_favicon.png">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
{% endraw %} [/sourcecode]
Para ver cómo se traduce lo anterior en AMP HTML con formato,
consulta la fuente de cualquier página de [ampproject.org](https://www.ampproject.org/).
(En Google Chrome, haz clic con el botón derecho y selecciona `Ver código fuente de la página`).
## Estilos no permitidos
Los siguientes estilos no están permitidos en las páginas de AMP:
<table>
<thead>
<tr>
<th data-th="Banned style">Estilo prohibido</th>
<th data-th="Description">Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Banned style">Atributos de estilo insertados</td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>!</code> (calificador de importante) </td>
<td data-th="Description">No está permitido su uso.
Este es un requisito necesario para que AMP aplique sus normas relativas al tamaño de los elementos.</td>
</tr>
<tr>
<td data-th="Banned style"><code><link rel=”stylesheet”></code></td>
<td data-th="Description">No está permitido, con la excepción de las <a href="#the-custom-fonts-exception">fuentes personalizadas.</td>
</tr>
<tr>
<td data-th="Banned style"><code>*</code> (selector universal)</td>
<td data-th="Description">Tiene implicaciones de rendimiento negativas y podría utilizarse para eludir otras restricciones del selector.</td>
</tr>
<tr>
<td data-th="Banned style"><code>:not()</code></td>
<td data-th="Description">Podría utilizarse para simular el selector universal.</td>
</tr>
<tr>
<td data-th="Banned style">Pseudoselectores, pseudoclases y pseudoelementos</td>
<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>.
Ejemplo correcto: <code>a:hover, div:last-of-type</code>
Ejemplo incorrecto: <code>amp-img:hover, amp-img:last-of-type</code></td>
</tr>
<tr>
<td data-th="Banned style">Clase <code>-amp-</code> y nombres de etiquetas <code>i-amp-</code></td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
<td data-th="Description">Estas propiedades no están permitidas
por razones de seguridad.</td>
</tr>
<tr>
<td data-th="Banned style"><code>filter</code></td>
<td data-th="Description">Se incluye en la lista negra por problemas de rendimiento.</td>
</tr>
</tbody>
</table>
## Propiedades de transición y animación incluidas en la lista blanca
AMP solo permite transiciones y animaciones de propiedades
que puedan ser aceleradas por GPU en los navegadores comunes.
El proyecto de AMP incluye acualmente en la lista blanca `opacity`, `transform`
y `-vendorPrefix-transform`.
En los siguientes ejemplos, `<property>` tiene que estar en la lista blanca:
* `transition <property> (Also -vendorPrefix-transition)`
* @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
La propiedad `overflow` (y `overflow-y`, `overflow-x`)
no puede tener como estilo “auto” ni “scroll”.
Ningún elemento definido por el usuario en un documento de AMP puede tener una barra de desplazamiento.
## La excepción de las fuentes personalizadas
Las páginas de AMP no pueden incluir hojas de estilo externas, con la excepción de fuentes personalizadas.
Los dos métodos admitidos para hacer referencia a fuentes personalizadas son
las etiquetas de enlace que apuntan a los proveedores de fuentes de la lista blanca y la inclusión de `@font-face`.
Los proveedores de fuentes solo pueden estar en la lista blanca
si son compatibles con las integraciones de CSS exclusivamente y publican en HTTPS.
Actualmente, solo estos orígenes se incluyen en la lista blanca
y pueden publicar fuentes mediante etiquetas de enlace:
* [https://fast.fonts.net](https://fast.fonts.net)
* [https://fonts.googleapis.com](https://fonts.googleapis.com)
Ejemplo de etiqueta de enlace que apunta al proveedor de fuente en la lista blanca, Google Fonts:
[sourcecode:html]
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]
Como alternativa, se puede usar [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).
Las fuentes incluidas mediante `@font-face` deben obtenerse con
el esquema HTTP o HTTPS.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Unterstützte CSS-Stile
---
[TOC]
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.
Außerdem sind bestimmte Stile wegen der Auswirkungen auf die Leistung unzulässig und auch Inline-Stilattribute sind nicht erlaubt.
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)).
Sie können allerdings CSS-Präprozessoren und Vorlagen verwenden, um statische Seiten für die bessere Verwaltung Ihrer Inhalte zu erstellen.
{% call callout('Note', type='note') %}
Für AMP-Komponenten stehen Standardstile zur Verfügung, um die Erstellung responsiver Seiten zu vereinfachen.
Diese Stile werden in [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css) definiert.
{% endcall %}
## CSS-Präprozessoren verwenden
Die von Präprozessoren erzeugte Ausgabe funktioniert in AMP ebenso gut wie auf jeder anderen Webseite.
Die Website [ampproject.org](https://www.ampproject.org/) verwendet z. B. [Sass](http://sass-lang.com/).
Wir verwenden [Grow](http://grow.io/) zum Erstellen der statischen AMP-Seiten, aus denen die Website [ampproject.org](https://www.ampproject.org/) besteht.
Achten Sie bei der Verwendung von Präprozessoren besonders darauf, was Sie einschließen. Laden Sie nur das, was Ihre Seiten auch verwenden.
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.
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.
[sourcecode:html] {% raw %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<title>Accelerated Mobile Pages Project</title>
<link rel="shortcut icon" href="/static/img/amp_favicon.png">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
{% endraw %} [/sourcecode]
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.
In Chrome klicken Sie dazu mit der rechten Maustaste und wählen `View Page Source` aus.
## Unzulässige Stile
Die folgenden Stile sind auf AMP-Seiten nicht erlaubt:
<table>
<thead>
<tr>
<th data-th="Banned style">Unzulässiger Stil</th>
<th data-th="Description">Beschreibung</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Banned style">Inline-Stilattribute</td>
<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>
</tr>
<tr>
<td data-th="Banned style">Qualifizierer <code>!important</code> </td>
<td data-th="Description">Darf nicht verwendet werden.
Andernfalls können die AMP-Regeln zur Festlegung der Elementgröße nicht angewandt werden.</td>
</tr>
<tr>
<td data-th="Banned style"><code><link rel="stylesheet"></code></td>
<td data-th="Description">Unzulässig mit Ausnahme [benutzerdefinierter Schriftarten](#the-custom-fonts-exception)</td>
</tr>
<tr>
<td data-th="Banned style"><code>*</code> (Universalselektor)</td>
<td data-th="Description">Negative Auswirkungen auf die Leistung. Könnte zur Umgehung anderer Selektoreinschränkungen verwendet werden</td>
</tr>
<tr>
<td data-th="Banned style"><code>:not()</code></td>
<td data-th="Description">Könnte zur Simulation des Universalselektors verwendet werden</td>
</tr>
<tr>
<td data-th="Banned style">Pseudoselektoren, Pseudoklassen und Pseudoelemente</td>
<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.
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>
</tr>
<tr>
<td data-th="Banned style">Klassennamen mit <code>-amp-</code> und Tag-Namen mit <code>i-amp-</code></td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
<td data-th="Description">Diese Eigenschaften sind aus Sicherheitsgründen nicht zulässig.</td>
</tr>
<tr>
<td data-th="Banned style"><code>filter</code></td>
<td data-th="Description">Aus Leistungsgründen nicht erlaubt</td>
</tr>
</tbody>
</table>
## transition- und animation-Eigenschaften auf der weißen Liste
In AMP sind nur Übergänge und Animationen von Eigenschaften gestattet, die in üblichen Browsern von der GPU beschleunigt werden können.
Im AMP-Projekt befinden sich derzeit `opacity`, `transform` und `-vendorPrefix-transform` auf der weißen Liste.
In den folgenden Beispielen muss `<property>` auf die weiße Liste gesetzt sein:
* `transition <property> (Also -vendorPrefix-transition)`
* @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
Die `overflow`-Eigenschaft sowie `overflow-y` und `overflow-x` dürfen nicht als “auto” oder “scroll” definiert werden.
Benutzerdefinierte Elemente in einem AMP-Dokument dürfen keine Bildlaufleiste enthalten.
## Die Ausnahme: benutzerdefinierte Schriftarten
Abgesehen von benutzerdefinierten Schriftarten dürfen AMP-Seiten keine externen Stylesheets enthalten.
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`.
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:
* [https://fast.fonts.net](https://fast.fonts.net)
* [https://fonts.googleapis.com](https://fonts.googleapis.com)
Beispiel für link-Tag, das auf den auf der weißen Liste befindlichen Schriftartenanbieter Google Fonts verweist:
[sourcecode:html]
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]
Alternativ kann [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) verwendet werden.
Über `@font-face` angegebene Schriftarten müssen über das HTTP- oder HTTPS-Schema abgerufen werden.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: CSS compatibles
---
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)).
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.
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)).
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.
**Remarque** : Les composants AMP ont des styles par défaut pour faciliter la création de pages responsives.
Ces styles sont définis dans l'[`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
[TOC]
## Utiliser les préprocesseurs CSS
La sortie générée par des préprocesseurs fonctionne aussi bien avec les pages AMP qu'avec les autres pages Web.
Par exemple, le site [ampproject.org](https://www.ampproject.org/) utilise [Sass](http://sass-lang.com/).
Nous utilisons [Grow](http://grow.io/) pour créer les pages AMP statiques qui composent le site [ampproject.org](https://www.ampproject.org/).
Lorsque vous utilisez des préprocesseurs, accordez une attention particulière à ce que vous incluez ; chargez seulement ce que vos pages utilisent.
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`.
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.
[sourcecode:html] {% raw %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<title>Accelerated Mobile Pages Project</title>
<link rel="shortcut icon" href="/static/img/amp_favicon.png">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
{% endraw %} [/sourcecode]
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/).
(Dans Chrome, faites un clic droit, puis sélectionnez `Afficher la source de la page`.)
## Styles interdits
Les styles suivants ne sont pas autorisés dans les pages AMP :
<table>
<thead>
<tr>
<th data-th="Banned style">Style interdit</th>
<th data-th="Description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Banned style">Attributs de style intégrés</td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>!</code>qualificateur important </td>
<td data-th="Description">Utilisation interdite.
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>
</tr>
<tr>
<td data-th="Banned style"><code><link rel="stylesheet"></code></td>
<td data-th="Description">Interdit à l'exception des <a href="#the-custom-fonts-exception">polices personnalisées</a>.</td>
</tr>
<tr>
<td data-th="Banned style"><code>*</code> (sélecteur universel)</td>
<td data-th="Description">Implications négatives sur les performances ; pourrait être utilisé pour contourner d'autres restrictions de sélection.</td>
</tr>
<tr>
<td data-th="Banned style"><code>:not()</code></td>
<td data-th="Description">Peut être utilisé pour simuler le sélecteur universel.</td>
</tr>
<tr>
<td data-th="Banned style">Pseudo-sélecteurs, pseudo-classes et pseudo-éléments</td>
<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>.
Exemple correct : <code>a:hover, div:last-of-type</code>
Exemple incorrect : <code>amp-img:hover, amp-img:last-of-type</code></td>
</tr>
<tr>
<td data-th="Banned style">Noms de classes <code>-amp-</code> et de balises <code>i-amp-</code></td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
<td data-th="Description">Ces propriétés ne sont pas autorisées pour des raisons de sécurité.</td>
</tr>
<tr>
<td data-th="Banned style"><code>filter</code></td>
<td data-th="Description">Mis sur liste noire en raison de problèmes de performances.</td>
</tr>
</tbody>
</table>
## Propriétés d'animations et de transitions sur liste blanche
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.
Le projet AMP accepte actuellement `opacity`, `transform` et `-vendorPrefix-transform`.
Dans les exemples suivants, `<property>` doit être sur liste blanche :
* `transition <property> (Also -vendorPrefix-transition)`
* @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
La propriété `overflow` (et `overflow-y`, `overflow-x`) ne peut pas utiliser le style “auto” ni “scroll”.
Aucun élément défini par l'utilisateur dans un document AMP ne peut avoir une barre de défilement.
## Exception : les polices personnalisées
Les pages AMP ne peuvent pas inclure de feuilles de style externes, à l'exception des polices personnalisées.
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`.
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 :
* [https://fast.fonts.net](https://fast.fonts.net)
* [https://fonts.googleapis.com](https://fonts.googleapis.com)
Exemple de balise de lien pointant vers le fournisseur de polices sur liste blanche, Google Fonts :
[sourcecode:html]
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]
Vous pouvez aussi utiliser [`@font-face`](https://developer.mozilla.org/fr-FR/docs/Web/CSS/@font-face).
Les polices incluses via `@font-face` doivent être récupérées via le schéma HTTP ou HTTPS.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Stili CSS supportati
---
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)).
Inoltre, alcuni stili non sono consentiti a causa delle implicazioni legate al rendimento; gli attributi di stili in linea non sono consentiti.
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)).
Puoi però utilizzare i preprocessori e i modelli CSS per creare pagine statiche e poter così gestire meglio i tuoi contenuti.
**Nota.** Nei componenti AMP ci sono stili predefiniti integrati che facilitano la creazione di pagine reattive.
Questi stili sono definiti nell'elemento [`amp.css`](https://github.com/ampproject/amphtml/blob/master/css/amp.css).
[TOC]
## Utilizzare i preprocessori CSS
L'output generato dai preprocessori funziona bene nelle pagine AMP così come in qualsiasi altra pagina web.
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/)).
Se utilizzi i preprocessori, presta particolare attenzione a ciò che includi; carica soltanto gli elementi utilizzati nelle pagine.
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`.
È 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.
[sourcecode:html] {% raw %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
<title>Accelerated Mobile Pages Project</title>
<link rel="shortcut icon" href="/static/img/amp_favicon.png">
<link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
<link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
{% endraw %} [/sourcecode]
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/).
In Chrome, fai clic con il pulsante destro del mouse e seleziona `Visualizza sorgente pagina`.
## Stili non consentiti
Gli stili che seguono non sono consentiti nelle pagine AMP:
<table>
<thead>
<tr>
<th data-th="Banned style">Stile vietato</th>
<th data-th="Description">Descrizione</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Banned style">Attributi di stili in linea</td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>!</code>important (qualificatore) </td>
<td data-th="Description">Utilizzo non consentito.
Si tratta di un requisito necessario per consentire l'applicazione delle regole di ridimensionamento degli elementi di AMP.</td>
</tr>
<tr>
<td data-th="Banned style"><code><link rel="stylesheet"></code></td>
<td data-th="Description">Non consentito, se non per i <a href="#the-custom-fonts-exception">tipi di carattere personalizzati</a>.</td>
</tr>
<tr>
<td data-th="Banned style"><code>*</code> (selettore universale)</td>
<td data-th="Description">Ha implicazioni negative sul rendimento e potrebbe essere utilizzato per aggirare altre limitazioni dei selettori.</td>
</tr>
<tr>
<td data-th="Banned style"><code>:not()</code></td>
<td data-th="Description">Potrebbe essere utilizzato per simulare il selettore universale.</td>
</tr>
<tr>
<td data-th="Banned style">Pseudo-selettori, pseudo-classi e pseudo-elementi</td>
<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>.
Esempio corretto: <code>a:hover, div:last-of-type</code>
Esempio errato: <code>amp-img:hover, amp-img:last-of-type</code></td>
</tr>
<tr>
<td data-th="Banned style">Classe <code>-amp-</code> e nomi di tag <code>i-amp-</code></td>
<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>
</tr>
<tr>
<td data-th="Banned style"><code>behavior</code>, <code>-moz-binding</code></td>
<td data-th="Description">Queste proprietà non sono consentite per motivi di sicurezza.</td>
</tr>
<tr>
<td data-th="Banned style"><code>filter</code></td>
<td data-th="Description">Non consentito per questioni di rendimento.</td>
</tr>
</tbody>
</table>
## Proprietà di transizioni e animazioni consentite
AMP consente soltanto le proprietà di transizioni e animazioni che è possibile sottoporre ad accelerazione GPU nei browser più comuni.
Il progetto AMP autorizza attualmente le proprietà `opacity`, `transform` e `-vendorPrefix-transform`.
Negli esempi seguenti, `<property>` deve essere nella whitelist:
* `transition <property> (Also -vendorPrefix-transition)`
* @ `@keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)`
Alla proprietà `overflow` (e `overflow-y`, `overflow-x`) non può essere applicato lo stile “auto” o “scroll”.
Nessun elemento definito dall'utente in un documento AMP può avere una barra di scorrimento.
## L'eccezione dei tipi di carattere personalizzati
Le pagine AMP non possono includere fogli di stile esterni, ad eccezione dei tipi di carattere personalizzati.
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`.
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:
* [https://fast.fonts.net](https://fast.fonts.net)
* [https://fonts.googleapis.com](https://fonts.googleapis.com)
Esempio di tag link che rimanda al fornitore di caratteri autorizzato Google Fonts:
[sourcecode:html]
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]
In alternativa puoi utilizzare [`@font-face`](https://developer.mozilla.org/it-IT/docs/Web/CSS/@font-face).
I tipi di carattere inclusi tramite `@font-face` devono essere recuperati tramite lo schema HTTP o HTTPS.
```
--------------------------------------------------------------------------------
/assets/sass/pages/amp-conf.scss:
--------------------------------------------------------------------------------
```scss
@import '../_config.scss';
@import '../_mixins.scss';
.amp-conf {
a.reserve-button {
display: inline-block;
background: #FFAB00;
border-radius: 2px;
padding: 0.5em 1em;
color: #fff;
font-size: 20px;
font-weight: 400;
vertical-align: middle;
margin-top: 20px;
margin-left: 24px;
&:hover {
text-decoration: none;
background: #E69A00;
}
}
section.amp-conf-section {
padding: 0;
.wrapper {
margin: 0 auto;
width: 80%;
max-width: 800px;
}
h2 {
font-size: 4em;
margin-bottom: 0em;
}
&.teaser {
margin-top: 80px;
text-align: center;
p {
padding-bottom: 2em;
span {
font-weight: 400;
}
}
}
&.description {
background: $gradient-anglebold;
margin-top: 40px;
position: relative;
p {
background: #fff;
padding: 1em;
margin: 0 auto;
width: 80%;
max-width: 800px;
border-top: 5px solid #0379C4;
position: relative;
top: -40px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.31);
text-align: center;
span {
display: block;
text-align: left;
}
}
ul {
text-align: center;
padding-bottom: 2em;
li {
background: #005992;
padding: 6px 12px;
padding-left: 20px;
border-radius: 2px;
display: inline-block;
margin: 0;
margin-left: -6px;
position: relative;
overflow: hidden;
&::after {
display: block;
content: "";
width: 4px;
position: absolute;
top: -4px;
bottom: -4px;
left: 4px;
background: #fff;
transform: rotate(10deg);
z-index: 1;
}
&:first-child {
margin-left: 0;
&::after {
display: none;
}
}
}
a {
color: #fff;
}
}
}
&.schedule {
padding: 2em 0;
}
&.speakers {
padding: 2em 0;
background: #f5f5f5;
padding-bottom: 4em;
}
&.workshops {
padding: 2em 0;
padding-bottom: 4em;
}
&.location {
padding: 2em 0;
background: $gradient-anglebold;
.wrapper {
display: flex;
flex-wrap: wrap;
amp-iframe {
flex: 1 0 40%;
min-width: 100px;
}
div {
margin-left: 2em;
flex-grow: 1;
@include max-screen(590px) {
margin-left: 0;
margin-top: 1em;
}
}
}
h3 {
color: #fff;
margin-top: 0;
}
p {
color: #fff;
}
a {
color: #fff;
text-decoration: underline;
}
span {
display: block;
}
}
&.faq {
font-size: 16px;
font-weight: normal;
h3 {
color: #0379C4;
font-size: 26px;
font-weight: 300;
margin-top: 1.1em;
margin-bottom: 0.5em;
}
dd {
margin-bottom: 1em;
font-weight: 300;
}
}
&.footer {
ul {
text-align: center;
li {
display: inline-block;
padding: 1em;
}
}
}
}
.code-of-conduct {
padding-bottom: 2em;
background: #fff;
margin: 3%;
ul,ol {
margin-left: 2em;
}
}
.days {
}
.day {
box-sizing: border-box;
min-width: 300px;
h4 {
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
}
ul.schedule {
list-style: none;
margin-left: 114px;
> li {
padding: 5px;
padding-bottom: 10px;
display: flex;
align-items: flex-start;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
width: 1px;
background: #bbb;
bottom: 0px;
top: 35px;
left: 23px;
}
div {
padding-left: 23px;
}
span.image {
display: block;
border-radius: 50px;
overflow: hidden;
height: 100px;
width: 100px;
position: absolute;
top: -30px;
left: -115px;
background: #eee;
}
span.image.multiple {
width: 60px;
height: 60px;
&:nth-child(even) {
left: -75px;
}
&:nth-child(2) { top: 10px; }
&:nth-child(3) { top: 50px; }
&:nth-child(4) { top: 90px; }
&:nth-child(5) { top: 130px; }
&:nth-child(6) { top: 170px; }
}
h5 {
font-size: 1em;
margin: 0;
color: inherit;
&::before {
display: none;
}
&.session {
font-weight: 500;
}
&.keynote {
font-weight: 500;
color: #0379C4;
}
&.panel,
&.workshop {
font-weight: 500;
color: #FF9800;
}
}
p {
font-size: 13px;
line-height: 1.6em;
}
}
time {
position: relative;
display: inline-block;
font-family: monospace;
&::before {
content: "";
display: block;
position: absolute;
width: 12px;
height: 1px;
background: #bbb;
right: -17px;
top: 50%;
}
}
> li.session,
> li.keynote {
time::after {
content: "";
display: block;
position: absolute;
width: 12px;
height: 1px;
background: #bbb;
left: -17px;
top: 50%;
}
}
small {
display: block;
line-height: 1.6em;
}
}
ul.workshops {
list-style: none;
display: flex;
li {
flex: 1 1 33%;
border-right: 1px solid #ddd;
&:nth-child(odd) {
background: #f5f5f5;
}
&:last-child {
border-right: 0;
}
h6 {
font-weight: normal;
margin: 0;
padding: 1em;
}
}
}
@include max-screen(500px) {
ul.schedule {
margin-left: 0;
> li span.image {
display: none;
}
> li.session,
> li.keynote {
time::after {
display: none;
}
}
}
ul.workshops {
display: block;
}
}
ul.speakers {
list-style: none;
li {
display: flex;
min-height: 100px;
margin-bottom: 40px;
&:nth-child(odd) {
flex-direction: row-reverse;
.image {
margin-right: 0;
margin-left: 20px;
}
}
}
h4 {
}
p {
font-size: 13px;
line-height: 1.6em;
}
.image {
border-radius: 25vw;
overflow: hidden;
display: inline-block;
height: 25vw;
width: 25vw;
max-width: 250px;
max-height: 250px;
background: #fff;
flex-shrink: 0;
margin-right: 20px;
position: relative;
}
}
}
```
--------------------------------------------------------------------------------
/content/learn/about-how.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: How AMP Works
$titles:
breadcrumb@: How AMP Works
$order: 1
class: about-how bg-triangle-secondary bg-triangle-bottom
$view: /views/about-how.html
components:
- youtube
hero:
title@: How AMP Works
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."
video: hVRkG1CQScA
points:
pointlist:
- title@: Execute all AMP JavaScript asynchronously
description@: |
JavaScript is powerful,
it can modify just about every aspect of the page,
but it can also block DOM construction and delay page rendering
(see also [Adding interactivity with JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
To keep JavaScript from delaying page rendering,
AMP allows only asynchronous JavaScript.
<p>AMP pages can’t include any author-written JavaScript.
Instead of using JavaScript,
interactive page features are handled in custom AMP elements.
The custom AMP elements may have JavaScript under the hood,
but they’re carefully designed to make sure they don’t cause performance degradation.
<p>While third-party JS is allowed in iframes,
it cannot block rendering.
For example, if third-party JS uses the
[super-bad-for-performance `document.write` API](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
it does not block rendering the main page.
- title@: Size all resources statically
description@: |
External resources such as images, ads or iframes must state their size in the HTML
so that AMP can determine each element’s size and position before resources are downloaded.
AMP loads the layout of the page without waiting for any resources to download.
<p>AMP uncouples document layout from resource layout.
Only one HTTP request is needed to layout the entire doc
([+fonts](#font-triggering-must-be-efficient)).
Since AMP is optimized to avoid expensive style recalculations and layouts in the browser,
there won’t be any re-layout when resources load.
- title@: Don’t let extension mechanisms block rendering
description@: |
AMP doesn’t let extension mechanisms block page rendering.
AMP supports extensions for things like
[lightboxes](/docs/reference/extended/amp-lightbox.html),
[instagram embeds](/docs/reference/extended/amp-instagram.html),
[tweets](/docs/reference/extended/amp-twitter.html), etc.
While these require additional HTTP requests,
those requests do not block page layout and rendering.
<p>Any page that uses a custom script must tell the AMP system
that it will eventually have a custom tag.
For example, the [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
script tells the system that there will be an `amp-iframe` tag.
AMP creates the iframe box before it even knows what it will include:
example: /content/includes/amp-iframe.md
- title@: Keep all third-party JavaScript out of the critical path
description@: |
Third-party JS likes to use synchronous JS loading.
They also like to `document.write` more sync scripts.
For example, if you have five ads on your page, and each of them cause three synchronous loads,
each with a 1 second latency connection,
you’re in 15 seconds of load time just for JS loading.
<p>AMP pages allow third-party JavaScript but only in sandboxed iframes.
By restricting them to iframes, they can’t block the execution of the main page.
Even if they trigger multiple style re-calculations,
their tiny iframes have very little DOM.
<p>The time it takes to do style-recalculations and layouts are restricted by DOM size,
so the iframe recalculations are very fast compared
to recalculating styles and layout for the page.
- title@: All CSS must be inline and size-bound
description@: |
CSS blocks all rendering, it blocks page load, and it tends to get bloated.
In AMP HTML pages, only inline styles are allowed.
This removes 1 or often more HTTP requests from the critical rendering path
compared to most web pages.
<p>Also, the inline style sheet has a maximum size of 50 kilobytes.
While this size is big enough for very sophisticated pages,
it still requires the page author to practice good CSS hygiene.
- title@: Font triggering must be efficient
id: font-triggering-must-be-efficient
description@: |
Web fonts are super large, so
[web font optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
is crucial to performance.
On a typical page that has a few sync scripts and a few external style sheets,
the browser waits and waits to start downloading these huge fonts until all this happens.
<p>The AMP system declares zero HTTP requests until fonts start downloading.
This is only possible because all JS in AMP has the async attribute
and only inline style sheets are allowed;
there’s no HTTP requests blocking the browser from downloading fonts.
- title@: Minimize style recalculations
description@: |
Each time you measure something, it triggers style recalculations which are expensive
because the browser has to layout the entire page.
In AMP pages, all DOM reads happen first before all the writes.
This ensures there’s the max of one recalc of styles per frame.
<p>Learn more about impact of style and layout recalculations on
[rendering performance](https://developers.google.com/web/fundamentals/performance/rendering/).
- title@: Only run GPU-accelerated animations
description@: |
The only way to have fast optimizations is to run them on the GPU.
GPU knows about layers, it knows how to perform some things on these layers,
it can move them, it can fade them, but it can’t update the page layout;
it will hand that task over to the browser, and that’s not good.
<p>The rules for animation-related CSS ensure that animations can be GPU-accelerated.
Specifically, AMP only allows animating and transitioning on transform and opacity
so that page layout isn’t required.
Learn more about
[using transform and opacity for animation changes](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
- title@: Prioritize resource loading
description@: |
AMP controls all resource downloads: it prioritizes resource loading,
loading only what’s needed, and prefetches lazy-loaded resources.
<p>When AMP downloads resources, it optimizes downloads
so that the currently most important resources are downloaded first.
Images and ads are only downloaded if they are likely to be seen by the user,
above the fold, or if the user is likely to quickly scroll to them.
<p>AMP also prefetches lazy-loaded resources.
Resources are loaded as late as possible, but prefetched as early as possible.
That way things load very fast but CPU is only used
when resources are actually shown to users.
- title@: Load pages in an instant
description@: |
The new [preconnect API](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
is used heavily to ensure HTTP requests are as fast as possible when they are made.
With this,
a page can be rendered before the user explicitly states they’d like to navigate to it;
the page might already be available by the time the user actually selects it,
leading to instant loading.
<p>While prerendering can be applied to all web content,
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
and prerendering doesn’t render things that might be expensive in terms of CPU.
<p>When AMP documents get prerendered for instant loading,
only resources above the fold are actually downloaded.
When AMP documents get prerendered for instant loading,
resources that might use a lot of CPU (like third-party iframes) do not get downloaded.
<p>Learn more about
[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).
- title@: Help make AMP faster
description@: |
AMP is an open-source effort.
We need your help to make AMP even faster.
Learn [how to contribute](/docs/support/contribute.html).
cta:
title@: See what AMP can do for you
link_text@: Learn who uses AMP
link_url: /content/learn/who-uses-amp.yaml
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Zwiększanie wydajności przez AMP
---
[TOC]
Połączenie następujących optymalizacji sprawia, że strony AMP są tak szybkie i sprawiają wrażenie, że ładują się natychmiast:
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.
<amp-youtube
data-videoid="hVRkG1CQScA"
layout="responsive"
width="480" height="270">
</amp-youtube>
## Zezwalaj tylko na skrypty asynchroniczne
Język JavaScript ma potężne możliwości,
może zmodyfikować niemal każdy aspekt strony,
ale może także zablokować konstrukcję modelu DOM i opóźnić renderowanie stron
(zobacz też [Dodawanie interaktywności przy użyciu JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Aby uniemożliwić skryptom JavaScript opóźnianie renderowania stron,
AMP zezwala wyłącznie na asynchroniczne skrypty JavaScript.
Strony AMP nie mogą zawierać żadnego napisanego przez autora skryptu JavaScript.
Zamiast korzystania z języka JavaScript,
interaktywne funkcje stron są obsługiwane w niestandardowych elementach AMP.
Niestandardowe elementy AMP mogą zawierać wewnątrz skrypt JavaScript,
ale zaprojektowano je starannie w taki sposób, aby nie powodowały one pogorszenia wydajności.
Chociaż skrypty JS niezależnych podmiotów są dozwolone w ramkach iframe,
nie mogą one blokować renderowania.
Jeśli na przykład niezależny skrypt JS używa
[fatalnej dla wydajności funkcji API `document.write`](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
nie blokuje ona renderowania strony głównej.
## Statycznie nadaj rozmiary wszystkim zasobom
Zasoby zewnętrzne, takie jak obrazy, reklamy lub ramki iframe muszą informować o swoim rozmiarze w HTML,
dzięki czemu AMP może określić rozmiar i pozycję każdego elementu przed pobraniem zasobów.
AMP ładuje układ strony bez oczekiwania na pobranie jakichkolwiek zasobów.
AMP rozłącza układ dokumentu od układu zasobów.
Tylko jedno żądanie HTTP jest potrzebne do wyrenderowania całego dokumentu
([i czcionek](#font-triggering-must-be-efficient)).
Ponieważ AMP zoptymalizowano w celu uniknięcia kosztownego przeliczania stylów i układów w przeglądarce,
po załadowaniu zasobu nie ma żadnego ponownego rozmieszczania.
## Nie pozwól, aby mechanizmy rozszerzeń blokowały renderowanie
AMP nie pozwala, aby mechanizmy rozszerzeń blokowały renderowanie stron.
AMP obsługuje rozszerzenia dla takich obiektów jak
[ramki lightbox](/docs/reference/extended/amp-lightbox.html),
[umieszczone elementy z Instagrama](/docs/reference/extended/amp-instagram.html),
[tweety](/docs/reference/extended/amp-twitter.html) itp.
Chociaż wymagają one dodatkowych żądań HTTP,
te żądania nie blokują układu strony ani renderowania.
Każda strona korzystająca z niestandardowego skryptu musi poinformować system AMP,
że może ona mieć niestandardowy znacznik.
Na przykład skrypt [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
informuje system, że w dokumencie wystąpi znacznik `amp-iframe`.
AMP tworzy ramkę iframe zanim otrzyma informacje, co się w niej znajdzie:
[sourcecode:html]
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
## Usuń wszystkie niezależne skrypty JavaScript ze ścieżki krytycznej
Niezależne skrypty JS lubią korzystać z synchronicznego ładowania JS.
Lubią one także korzystać z funkcji `document.write` w celu tworzenia dodatkowych skryptów synchronicznych.
Jeśli na stronie jest na przykład pięć reklam i każda z nich wykonuje trzy synchroniczne operacje wczytywania
z czasem oczekiwania łącza wynoszącym 1 sekundę,
czas ładowania samych tylko skryptów JS wynosi 15 sekund.
Strony AMP umożliwiają korzystanie z niezależnych skryptów JavaScript, ale tylko w izolowanych ramkach iframe.
Wyrzucenie tych skryptów do ramek iframe pozwala wyeliminować blokowanie wykonywania strony głównej.
Nawet jeśli wyzwalają one liczne przeliczenia stylów,
ich niewielkie ramki iframe mają bardzo mały model DOM.
Przeliczenia stylów i układów odpowiadają rozmiarowi modelu DOM,
dlatego przeliczenia ramek iframe są bardzo szybkie w porównaniu
z przeliczaniem stylów i układów na stronie.
## Cały CSS musi być wstawiany i powiązany z rozmiarem
CSS blokuje cały rendering, blokuje ładowanie strony i ma tendencję do rozrastania się.
Na stronach AMP HTML dozwolone są tylko style wstawiane.
Pozwala to usnąć jedno, a często wiele żądań HTTP z krytycznej ścieżki renderowania
w porównaniu z większością stron internetowych.
Ponadto wstawiany arkusz stylów ma rozmiar maksymalny 50 kilobajtów.
Chociaż taki rozmiar pozwala na tworzenie bardzo wyrafinowanych stron,
wymaga on również od autora zachowania zasad „higieny CSS”.
## Wyzwalanie czcionek musi być efektywne
Czcionki internetowe są bardzo duże, dlatego
[optymalizacja czcionek internetowych](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
ma kluczowe znaczenie dla wydajności.
Na typowej stronie z kilkoma skryptami synchronicznymi i kilkoma zewnętrznymi arkuszami stylów,
przeglądarka czeka i czeka na rozpoczęcie pobierania tych olbrzymich czcionek, aż to wszystko się wydarzy.
System AMP deklaruje zero żądań HTTP, dopóki nie rozpocznie się pobieranie czcionek.
Jest to możliwe tylko dlatego, że cały kod JS w AMP ma atrybut async
i dozwolone są tylko style wstawiane;
nie ma żądań HTTP blokujących pobieranie czcionek przez przeglądarkę.
## Minimalizuj przeliczanie stylów
Podczas każdego pomiaru wyzwalane jest przeliczanie stylów, które jest kosztowne,
ponieważ przeglądarka musi rozmieścić całą stronę.
Na stronach AMP wszystkie odczyty DOM wydarzają się przed wszystkimi zapisami.
Dzięki temu na każdą ramkę przypada maksymalnie jedno przeliczenie stylów.
Dowiedz się więcej o wpływie przeliczeń stylów i układów na
[wydajność renderowania](https://developers.google.com/web/fundamentals/performance/rendering/).
## Uruchamiaj tylko animacje z akceleracją sprzętową GPU
Jedyną metodą przyspieszenia animacji jest uruchamianie ich na procesorze graficznym (GPU).
Procesor GPU ma informacje o warstwach, obsługuje wykonywanie operacji na tych warstwach,
może je przenosić, może je wygaszać, ale nie może zaktualizować układu strony;
przekaże to zadanie do przeglądarki, a to nie jest pożądane.
Reguły dla arkuszy stylów CSS powiązanych z animacjami zapewniają możliwość przyspieszania animacji przez procesor GPU.
W szczególności tylko AMP zezwala na animację i przejście dla transformacji i przezroczystości
, dzięki czemu ponowne rozmieszczenie strony nie jest wymagane.
Dowiedz się więcej o
[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).
## Ustal priorytety ładowania zasobów
AMP steruje pobieraniem wszystkich zasobów i ustala priorytety ładowania zasobów,
ładując tylko to, co potrzebne i pobierając z wyprzedzeniem zasoby ładowane z opóźnieniem.
Kiedy AMP pobiera zasoby, optymalizuje operacje pobierania
w taki sposób, aby najważniejsze zasoby były pobierane jako pierwsze.
Obrazy i reklamy są pobierane tylko wtedy, kiedy jest prawdopodobne, że zostaną zobaczone przez użytkownika,
w części strony widocznej na ekranie lub jeśli jest prawdopodobne, że użytkownik szybko przewinie do nich.
AMP pobiera także z wyprzedzeniem zasoby ładowane z opóźnieniem.
Zasoby są ładowane tak późno, jak to możliwe, ale pobierane z wyprzedzeniem tak wcześnie, jak to możliwe.
Dzięki temu strony ładują się bardzo szybko, ale procesor jest używany tylko wtedy,
gdy zasoby są rzeczywiście wyświetlane dla użytkowników.
## Ładuj strony w mgnieniu oka
Nowa [funkcja API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
jest intensywnie używana w celu zapewnienia maksymalnej możliwej szybkości żądań HTTP w momencie ich wysyłania.
Dzięki temu
strona może zostać wyrenderowana zanim jeszcze użytkownik jawnie zadeklaruje chęć przejścia do niej;
strona może być już dostępna, kiedy użytkownik rzeczywiście wybierze ją,
dzięki czemu ładowanie nastąpi błyskawicznie.
Chociaż renderowanie z wyprzedzeniem można zastosować do wszystkich treści internetowych,
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
i nie obejmuje ono elementów, których wyrenderowanie byłoby kosztowne w aspekcie wykorzystania procesora.
Kiedy dokumenty AMP są renderowane z wyprzedzeniem w celu błyskawicznego ładowania,
faktycznie pobierane są tylko zasoby w części strony widocznej na ekranie.
Podczas renderowania z wyprzedzeniem dokumentów AMP w celu błyskawicznego ładowania
nie są pobierane zasoby, które mogłyby znacząco obciążyć procesor (jak np. ramki iframe niezależnych dostawców).
Dowiedz się więcej,
[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).
## Pomóż przyspieszyć AMP
AMP to projekt Open Source.
Potrzebujemy Twojej pomocy, aby jeszcze bardziej przyspieszyć AMP.
Dowiedz się, [jak dodać własne materiały](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Tata Letak yang Didukung
---
Buat elemen Anda menjadi responsif;
sertakan `layout=responsive`.
[TOC]
## Nilai atribut tata letak yang didukung
Secara default,
gunakan tata letak responsif.
Berikut daftar lengkap atribut tata letak yang didukung:
<table>
<thead>
<tr>
<th class="col-twenty" data-th="Layout type">Jenis tata letak</th>
<th class="col-twenty" data-th="Width/height required">Lebar/tinggi diperlukan</th>
<th data-th="Behavior">Perilaku</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
<td class="col-twenty" data-th="Description">Tidak</td>
<td data-th="Behavior">Elemen tidak ditampilkan. Tata letak ini dapat diterapkan ke setiap elemen AMP. Komponen tersebut tidak menggunakan ruang sama sekali di layar karena tidak memiliki gaya tampilan. Hal ini diasumsikan bahwa elemen tersebut dapat tampil dengan sendirinya di tindakan pengguna, misalnya, <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
<td class="col-twenty" data-th="Description">Ya</td>
<td data-th="Behavior">Elemen memiliki lebar dan tinggi yang tetap tanpa mendukung responsivitas. Pengecualian hanya untuk elemen <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> dan <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
<td class="col-twenty" data-th="Description">Ya</td>
<td data-th="Behavior">Elemen diukur sesuai lebar elemen penampungnya dan ukuran panjangnya diubah secara otomatis ke rasio aspek yang diberikan oleh atribut lebar dan tinggi. Tata letak ini berfungsi sangat baik untuk sebagian besar elemen AMP, termasuk <a href="/docs/reference/amp-img.html"><code>amp-img</code></a> dan <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. Ruang yang tersedia tergantung pada elemen induk dan dapat disesuaikan menggunakan CSS <code>max-width</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
<td class="col-twenty" data-th="Description">Hanya tinggi</td>
<td data-th="Behavior">Elemen menggunakan ruang yang disediakan, namun tingginya tidak diubah. Tata letak ini berfungi dengan baik untuk elemen seperti <a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a> yang melibatkan konten yang diposisikan secara horizontal. Atribut <code>width</code> harus tidak ada atau harus sama dengan <code>auto</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fill</code></td>
<td class="col-twenty" data-th="Description">Tidak</td>
<td data-th="Behavior">Elemen menggunakan ruang yang disediakan, untuk tinggi dan lebarnya. Dengan kata lain, tata letak elemen isian sesuai dengan induknya.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>container</code></td>
<td class="col-twenty" data-th="Description">Tidak</td>
<td data-th="Behavior">Elemen memungkinkan elemen turunannya menentukan ukurannya, mirip seperti <code>div</code> HTML normal. Komponen diasumsikan tidak memiliki tata letak spesifik, tetapi bertindak sebagai penampung. Turunannya langsung dirender.</td>
</tr>
</tbody>
</table>
### Bagaimana jika lebar dan tinggi tidak ditentukan?
Dalam beberapa kasus, jika `width` atau `height` tidak ditentukan,
waktu proses AMP dapat mengubah nilai berikut menjadi default:
* [`amp-pixel`](/docs/reference/amp-pixel.html): Setelan default lebar dan tingginya adalah 0.
* [`amp-audio`](/docs/reference/extended/amp-audio.html): Setelan lebar dan tinggi disimpulkan dari browser.
### Bagaimana jika atribut tata letak tidak ditentukan?
Perilaku tata letak ditentukan seperti berikut:
* Jika `height` ada dan `width` tidak ada atau sama dengan `auto`, dianggap tata letak `fixed-height`.
* Jika atribut `width` atau `height` ada bersama dengan atribut `sizes`, dianggap tata letak `responsive`.
* Jika atribut `width` atau `height` ada, dianggap tata letak `fixed`.
* Jika `width` dan `height` tidak ada, dianggap tata letak `container`.
## Menggunakan @media dan media
Gunakan [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)
untuk mengontrol tampilan dan perilaku tata letak laman, seperti yang akan Anda lakukan di situs web lainnya.
Jika jendela browser merubah ukuran atau orientasi,
kueri media dievaluasi ulang serta elemen disembunyikan dan ditampilkan
berdasarkan hasil yang baru.
Pelajari lebih lanjut tentang mengontrol tata letak dengan menerapkan kueri media di
[Menggunakan kueri media CSS untuk responsivitas](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en).
Salah satu fitur tambahan untuk desain responsif yang tersedia di AMP adalah atribut `media`.
Atribut ini dapat digunakan di setiap elemen AMP;
atribut berfungsi seperti kueri media di stylesheet global,
tetapi hanya memengaruhi elemen spesifik di laman tunggal.
Misalnya, di sini terdapat 2 gambar dengan kueri media yang berdiri sendiri.
[sourcecode:html]
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive" >
</amp-img>
[/sourcecode]
Tergantung pada lebar layar, salah satu atau yang lainnya akan diambil dan dirender.
[sourcecode:html]
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive" >
</amp-img>
[/sourcecode]
## Menggunakan srcset dan ukuran
Gunakan atribut `srcset` untuk mengontrol aset elemen
berdasarkan berbagai ekspresi media.
Secara khusus, gunakan atribut tersebut untuk semua tag [`amp-img`](/docs/reference/amp-img.html)
guna menentukan aset gambar yang akan digunakan berdasarkan berbagai ukuran layar.
Dalam contoh sederhana ini,
`srcset` menentukan gambar yang akan digunakan berdasarkan lebar layar.
Alat deskripsi `w` memberi tahu browser tentang lebar
setiap gambar di daftar:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w >
</amp-img>
[/sourcecode]
**Catatan:** AMP mendukung alat deskripsi `w` di semua browser.
Pelajari lebih lanjut tentang membuat gambar responsif menggunakan `srcset`
di [Menggunakan Gambar Responsif (Sekarang)](http://alistapart.com/article/using-responsive-images-now).
Anda juga dapat menggunakan atribut `sizes` bersama `srcset`.
Atribut `sizes` mendeskripsikan cara menghitung ukuran elemen
berdasarkan ekspresi media apa pun.
Berdasarkan ukuran elemen yang dihitung,
agen pengguna memilih sumber paling relatif yang diberikan oleh atribut `srcset`.
Perhatikan contoh berikut:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w
sizes="(min-width: 650px) 50vw, 100vw" >
</amp-img>
[/sourcecode]
Atribut `sizes` menentukan lebar elemen menjadi 50% dari ukuran tampilan yang terlihat
jika tampilan yang terlihat adalah 650 piksel atau lebih.
Misalnya, jika tampilan yang terlihat adalah 800 piksel,
lebar elemen disetel menjadi 400 piksel.
Kemudian, browser memilih sumber daya `srcset` yang sesuai dengan 400 piksel,
menganggap rasio piksel perangkat adalah 1,
yang dalam hal ini adalah `narrow.jpg` (320 piksel).
**Penting:** Jika atribut ukuran ditentukan bersama lebar dan tinggi,
default tata letak menjadi `responsive`.
Pelajari lebih lanjut tentang cara membandingkan atribut `sizes` dan `srcset`
dengan kueri media di
entri blog [Srcset dan ukuran](https://ericportis.com/posts/2014/srcset-sizes/).
## Menyertakan placeholder dan fallback
### placeholder
Elemen yang ditandai dengan atribut `placeholder` bertindak sebagai
placeholder untuk elemen AMP induk.
Jika ditentukan, elemen `placeholder` harus merupakan turunan langsung dari elemen AMP.
[sourcecode:html]
<amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
[/sourcecode]
Secara default, placeholder langsung ditampilkan untuk elemen AMP,
meskipun sumber daya elemen AMP belum didownload atau diinisialisasi.
Setelah siap, elemen AMP biasanya menyembunyikan placeholder-nya dan menampilkan kontennya.
**Catatan:** Placeholder tidak harus berupa elemen AMP;
elemen HTML apa pun dapat bertindak sebagai placeholder.
### fallback
Gunakan atribut `fallback` untuk mengindikasikan perilaku fallback
untuk elemen apa pun yang tidak didukung oleh browser.
Misalnya, gunakan atribut `fallback` untuk berkomunikasi dengan pengguna
yang fitur tertentunya tidak didukung oleh browser:
[sourcecode:html]
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg" >
<div fallback>
<p>Your browser doesn’t support HTML5 video.</p>
</div>
</amp-video>
[/sourcecode]
Atribut `fallback` dapat disetel di elemen HTML apa pun, tidak hanya elemen AMP.
Jika ditentukan, elemen `fallback` harus berupa turunan langsung dari elemen AMP.
### noloading
Banyak elemen AMP dimasukkan ke daftar putih untuk menampilkan "indikator pemuatan",
yang merupakan animasi dasar yang menunjukkan bahwa elemen tersebut belum dimuat sepenuhnya.
Elemen dapat menyisih dari perilaku ini dengan menambahkan atribut `noloading`.
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Cómo AMP acelera el rendimiento
---
[TOC]
La combinación de las siguientes optimizaciones hace que las páginas AMP se carguen de manera casi instantánea:
Si prefieres escuchar antes que leer, en el siguiente video realizado por Malte Ubl, responsable de ingeniería de AMP, se ofrece información general similar a la que encontrarás en los párrafos que aparecen a continuación.
<amp-youtube
data-videoid="hVRkG1CQScA"
layout="responsive"
width="480" height="270">
</amp-youtube>
## Se permiten únicamente scripts asíncronos
JavaScript es poderoso:
puede modificar casi todos los aspectos de la página,
pero también puede bloquear la construcción del DOM y demorar la representación de la página
(consulta también [Añadir interactividad con JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Para evitar que JavaScript demore la representación de páginas,
AMP solo permite JavaScript asíncrono.
Las páginas AMP no pueden incluir JavaScript de autor.
En lugar de JavaScript,
para el control de las funciones de las páginas interactivas se emplean elementos de AMP personalizados.
Es posible que los elementos de AMP personalizados tengan ocultos rasgos de JavaScript,
pero están diseñados cuidadosamente para no tener efectos negativos en el rendimiento.
Si bien se permite contenido JS de terceros en iframes,
este no puede bloquear la representación.
Por ejemplo, si en el contenido JS de terceros se usa la
[API `document.write`, totalmente contraproducente para el rendimiento](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
no se bloqueará la representación de la página principal.
## Se ordenan estáticamente los recursos
Los recursos externos, como las imágenes, los anuncios o los iframes, deben establecer su tamaño en HTML
para que las páginas AMP puedan determinar el tamaño y la posición de cada elemento antes de que se descarguen los recursos.
El sistema AMP carga el diseño de una página sin esperar que se descarguen recursos.
Las páginas AMP desacoplan el diseño del documento del diseño del recurso.
Solo se necesita una solicitud HTTP para diseñar por completo el documento completo
([y las fuentes](#font-triggering-must-be-efficient)).
Dado que las páginas AMP están optimizadas para evitar recálculos de estilo y diseños pesados en el navegador,
no se llevará a cabo ninguna instancia de rediseño cuando se carguen los recursos.
## No se permite que los mecanismos de extensión bloqueen la representación
El sistema AMP no permite que los mecanismos de extensión bloqueen la representación de páginas.
Admite extensiones para recursos como
[lightbox](/docs/reference/extended/amp-lightbox.html),
[inserciones de Instagram](/docs/reference/extended/amp-instagram.html),
[tuits](/docs/reference/extended/amp-twitter.html), etc.
Si bien estos recursos necesitan de solicitudes HTTP adicionales,
estas no bloquean el diseño ni la representación de páginas.
Todas las páginas en las que se use un script personalizado deben indicarle al sistema AMP
que eventualmente tendrá una etiqueta personalizada.
Por ejemplo, el script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
le indica que habrá una etiqueta `amp-iframe`.
Las páginas AMP crean el cuadro de iframe antes de determinar lo que incluirá:
[sourcecode:html]
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
## Se mantiene el contenido JavaScript de terceros lejos de la ruta de acceso crítica
En el contenido JS de terceros generalmente se aplica carga de JS sincrónica y
también se implementa `document.write` en más scripts de sincronización.
Por ejemplo, si tienes cinco anuncios y cada uno de ellos tiene tres cargas sincrónicas
con una conexión de latencia de 1 segundo,
tendrás 15 segundos de carga solo para el contenido JS.
Las páginas AMP permiten JavaScript de terceros, pero solo en iframes de espacio aislado.
Si se restringen a los iframes, no pueden bloquear la ejecución de la página principal.
Incluso si activan varios recálculos de estilo,
sus minúsculos iframes tienen muy poco del DOM.
Los recálculos de estilo y los diseños son típicos del tamaño del DOM.
Por lo tanto, los recálculos de iframe son muy rápidos en comparación
con el recálculo de estilos y el diseño para la página.
## Los elementos de CSS deben estar alineados y su tamaño debe estar limitado
Los elementos de CSS bloquean toda representación y la carga de páginas, y su tamaño tiende a aumentar.
En páginas HTML de AMP, solo se permiten los estilos en línea.
Esto elimina una o, a menudo, más solicitudes HTTP de la ruta de acceso de representación crítica
en comparación con la mayoría de páginas web.
Además, la hoja de estilo en línea tiene un tamaño máximo de 50 kilobytes.
Si bien este tamaño es suficiente para páginas muy sofisticadas,
es necesario que el autor de la página realice un mantenimiento de CSS adecuado.
## La activación de fuentes debe ser eficaz
Las fuentes web son muy grandes. Por lo tanto, la
[optimización de fuentes web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
es crucial para el rendimiento.
En una página típica que tiene algunos scripts sincrónicos y algunas hojas de estilo externas,
el navegador aguarda para comenzar a descargar estas fuentes enormes hasta que todo esto suceda.
El sistema de AMP declara cero solicitudes HTTP hasta que las fuentes comienzan a descargarse.
Esto solo es posible porque todo el contenido JS en AMP tiene el atributo asíncrono
y porque solo se permiten hojas de estilo en línea;
no hay solicitudes HTTP que impidan que el navegador descargue las fuentes.
## Se minimizan los recálculos de estilo
Siempre que se mide algo se activan recálculos de estilo que resultan pesados,
ya que el navegador debe diseñar la página completa.
En páginas AMP, todas las lecturas del DOM tienen lugar antes que las escrituras.
Esto garantiza el valor máximo de un recálculo de estilos por cuadro.
Puedes obtener más información sobre el impacto de los recálculos de estilo y diseño en
[Rendimiento de la representación](https://developers.google.com/web/fundamentals/performance/rendering/).
## Solo se ejecutan animaciones con aceleración por GPU
La única forma de lograr optimizaciones rápidas es ejecutarlas en la GPU.
La GPU reconoce capas, identifica los procedimientos para llevar a cabo tareas en estos diseños
y puede moverlos y atenuarlos, pero no puede actualizar el diseño de la página.
Deriva la tarea al navegador, y eso no es conveniente.
Las reglas para CSS relacionado con la animación garantizan que la GPU pueda acelerar las animaciones.
Específicamente, el sistema de AMP solo permite realizar animaciones y transiciones en transformación y opacidad
para que no se necesite el diseño de la página.
Obtén más información sobre el
[Uso de los cambios en las propiedades transform y opacity para las animaciones](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
## Se prioriza la carga de recursos
El sistema de AMP controla todas las descargas de recursos. Prioriza la carga de recursos,
ya que carga solo lo que es necesario y realiza capturas previas de recursos de carga diferida.
Cuando descarga recursos, optimiza las descargas
para que se descarguen primero los recursos actuales más importantes.
Las imágenes y los anuncios solo se descargan si es probable que el usuario los vea,
en la parte superior de la página, o se desplace rápidamente hacia ellos.
El sistema de AMP también realiza capturas previas de recursos de carga diferida.
Los recursos se cargan lo más tarde posible, pero su captura previa se produce lo más pronto posible.
De esa manera, los objetos se cargan muy rápido, pero el CPU solo se usa
cuando se muestran los recursos ante el usuario.
## Las páginas se cargan al instante
La nueva [API de preconexión](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
se usa mucho para garantizar que las solicitudes HTTP sean lo más rápidas posible cuando se crean.
De esta forma,
una página se puede representar antes de que el usuario especifique explícitamente que quiere dirigirse hacia ella.
La página puede estar disponible cuando el usuario la seleccione,
lo cual hará que se cargue al instante.
Si bien la representación previa puede aplicarse a todo el contenido web,
también es posible que ocupe muchos recursos de ancho de banda y CPU. El sistema de AMP está optimizado para propiciar una reducción en ambos factores. Para la representación previa solo se descargan los recursos que están en la parte superior de la página
y no se representan los objetos que puedan ser pesados en términos de uso de CPU.
Cuando los documentos de AMP se representan previamente para la carga instantánea,
solo se descargan los recursos que están en la parte superior de la página.
A su vez, aquellos recursos que bajo las mismas circunstancias pudieran
implicar una alta exigencia para el CPU (como iframes de terceros) no se descargarán.
Obtén más información sobre la
[razón por la cual AMP HTML no aprovecha en su totalidad el escáner de precarga](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
## Se agiliza el sistema de AMP
El sistema de AMP es de código abierto.
Necesitamos tu ayuda para que sea aún más rápido.
Entérate de [cómo contribuir](/docs/support/contribute.html).
```