From 49e03623392d7c0902c4f55968481d3dfb130e56 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Tue, 16 Mar 2021 20:40:01 -0400 Subject: [PATCH] fix: flaws in web/o-r* --- files/en-us/web/opensearch/index.html | 10 +++++----- files/en-us/web/opensearch/new.png | Bin 0 -> 11831 bytes .../web/opensearch/searchsuggestionsample.png | Bin 0 -> 5228 bytes .../critical_rendering_path/index.html | 2 +- .../web/performance/dns-prefetch/index.html | 4 ++-- .../web/performance/fundamentals/index.html | 2 +- files/en-us/web/performance/index.html | 12 ++++++------ .../navigation_and_resource_timings/index.html | 2 +- .../optimizing_startup_performance/index.html | 6 +++--- .../performance/performance_budgets/index.html | 4 ++-- .../add_to_home_screen/index.html | 2 +- .../developer_guide/installing/index.html | 2 +- .../introduction/index.html | 16 ++++++++-------- .../graphics_for_responsive_sites/index.html | 12 ++++++------ .../responsive/media_types/index.html | 8 ++++---- .../responsive/mobile_first/index.html | 2 +- files/en-us/web/reference/api/index.html | 12 ++++++------ files/en-us/web/reference/index.html | 4 ++-- 18 files changed, 50 insertions(+), 50 deletions(-) create mode 100644 files/en-us/web/opensearch/new.png create mode 100644 files/en-us/web/opensearch/searchsuggestionsample.png diff --git a/files/en-us/web/opensearch/index.html b/files/en-us/web/opensearch/index.html index 9f5fa936004ad5f..448e4fa125496ca 100644 --- a/files/en-us/web/opensearch/index.html +++ b/files/en-us/web/opensearch/index.html @@ -16,7 +16,7 @@

Firefox also supports additional features not in the OpenSearch standard, such as search suggestions and the <SearchForm> element. This article focuses on creating OpenSearch-compatible search plugins that support these additional Firefox features.

-

OpenSearch description files can be advertised as described in Autodiscovery of search plugins, and can be installed programmatically as described in Adding search engines from web pages.

+

OpenSearch description files can be advertised as described in Autodiscovery of search plugins, and can be installed programmatically as described in Adding search engines from web pages.

OpenSearch description file

@@ -48,7 +48,7 @@

OpenSearch description file

URI of an icon for the search engine. When possible, include a 16×16 image of type image/x-icon (such as /favicon.ico) and a 64×64 image of type image/jpeg or image/png.

-

The URI may also use the data: URI scheme. (You can generate a data: URI from an icon file at The data: URI kitchen.)

+

The URI may also use the data: URI scheme. (You can generate a data: URI from an icon file at The data: URI kitchen.)

<Image height="16" width="16" type="image/x-icon">https://example.com/favicon.ico</Image>
   <!-- or -->
@@ -59,7 +59,7 @@ 
OpenSearch description file

 
  
Note: For icons loaded remotely (that is, from https:// URIs as opposed to data: URIs), Firefox will reject icons larger than 10 kilobytes.

 
- 
Search suggestions from Google displayed in Firefox's search box

+ 
Search suggestions from Google displayed in Firefox's search box
Url
Describes the URL or URLs to use for the search. The template attribute indicates the base URL for the search query.
@@ -117,7 +117,7 @@

Autodiscovery of search plugins

In Firefox, an icon change in the search box indicates there's a provided search plugin. (See image, the green plus sign.) Thus if a search box is not shown in the user's UI, they will receive no indication. In general, behavior varies among browsers.

-How search plugin availability is shown in Firefox
+How search plugin availability is shown in Firefox

Supporting automatic updates for OpenSearch plugins

@@ -140,7 +140,7 @@

Troubleshooting Tips

  • Your server should serve OpenSearch plugins using Content-Type: application/opensearchdescription+xml.
  • Be sure that your Search Plugin XML is well formed. You can check by loading the file directly into Firefox. Ampersands (&) in the template URL must be escaped as &amp;, and tags must be closed with a trailing slash or matching end tag.
  • The xmlns attribute is important — without it you could get the error message "Firefox could not download the search plugin".
    • -
  • You must include a text/html URL — search plugins including only Atom or RSS URL types (which is valid, but Firefox doesn't support) will also generate the "could not download the search plugin" error.
    • +
  • You must include a text/html URL — search plugins including only Atom or RSS URL types (which is valid, but Firefox doesn't support) will also generate the "could not download the search plugin" error.
  • Remotely fetched favicons must not be larger than 10KB (see {{ Bug(361923) }}).
    • diff --git a/files/en-us/web/opensearch/new.png b/files/en-us/web/opensearch/new.png new file mode 100644 index 0000000000000000000000000000000000000000..ea3ec5d9d85bc1206b45997d02c67c982318e836 GIT binary patch literal 11831 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 literal 0 HcmV?d00001 diff --git a/files/en-us/web/opensearch/searchsuggestionsample.png b/files/en-us/web/opensearch/searchsuggestionsample.png new file mode 100644 index 0000000000000000000000000000000000000000..dbea410e925c8fa840f30c2a55f4fc76b6baa712 GIT binary patch literal 5228 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 Object Model

    In terms of selector performance, less specific selectors are faster than more specific ones. For example, .foo {} is faster than .bar .foo {} because when the browser finds .foo, in the second scenario, it has to walk up the DOM to check if .foo has an ancestor .bar. The more specific tag requires more work from the browser, but this penalty is not likely worth optimizing.

    -

    If you measure the time it takes to parse CSS, you'll be amazed at how fast browsers truly are. The more specific rule is more expensive because it has to traverse more nodes in the DOM tree - but that extra expense is generally minimal. Measure first. Optimize as needed. Specificity is likely not your low hanging fruit. When it comes to CSS, selector performance optimization, improvements will only be in microseconds. There are other ways to optimize CSS, such as minification, and separating deferred CSS into non-blocking requests by using media queries.

    +

    If you measure the time it takes to parse CSS, you'll be amazed at how fast browsers truly are. The more specific rule is more expensive because it has to traverse more nodes in the DOM tree - but that extra expense is generally minimal. Measure first. Optimize as needed. Specificity is likely not your low hanging fruit. When it comes to CSS, selector performance optimization, improvements will only be in microseconds. There are other ways to optimize CSS, such as minification, and separating deferred CSS into non-blocking requests by using media queries.

    Render Tree

    diff --git a/files/en-us/web/performance/dns-prefetch/index.html b/files/en-us/web/performance/dns-prefetch/index.html index 6d359fbd42886bd..1be92824b9033aa 100644 --- a/files/en-us/web/performance/dns-prefetch/index.html +++ b/files/en-us/web/performance/dns-prefetch/index.html @@ -54,14 +54,14 @@

    Best practices

    The logic behind pairing these hints is because support for dns-prefetch is better than support for preconnect. Browsers that don’t support preconnect will still get some added benefit by falling back to dns-prefetch. Because this is an HTML feature, it is very fault-tolerant. If a non-supporting browser encounters a dns-prefetch hint—or any other resource hint—your site won’t break. You just won’t receive the benefits it provides.

    -

    Some resources such as fonts are loaded in anonymous mode. In such cases you should set the crossorigin attribute with the preconnect hint. If you omit it, the browser will only perform the DNS lookup.

    +

    Some resources such as fonts are loaded in anonymous mode. In such cases you should set the crossorigin attribute with the preconnect hint. If you omit it, the browser will only perform the DNS lookup.

    See also

    -
  • Beacon API
    • +
  • Beacon API
  • Resource Hints - dns-prefetch, preconnect, prefetch, and prerender
  • Fetchevent.navigationPreload
  • Performance Server Timing API
    • @@ -272,7 +272,7 @@

    See also

  • Web Workers API
    • -
  • PWA
    • +
  • PWA
  • Caching
  • Content Delivery Networks (CDN)
    • diff --git a/files/en-us/web/performance/navigation_and_resource_timings/index.html b/files/en-us/web/performance/navigation_and_resource_timings/index.html index d87bd2f3464e2ae..2fedd6ab8d9cbce 100644 --- a/files/en-us/web/performance/navigation_and_resource_timings/index.html +++ b/files/en-us/web/performance/navigation_and_resource_timings/index.html @@ -201,7 +201,7 @@

    Performance Entry API

    -

    When a user requests a web site or application, to populate the browser the user agent goes through a series of steps, including a {{glossary('DNS')}} lookup, {{glossary('TCP handshake')}}, and SSL negotiation, before the user agent makes the actual request and the servers return the requested assets. The browser then parses the content received, builds the DOM, CSSOM, accessibility, and render trees, eventually rendering the page. Once the user agent stops parsing the document, the user agent sets the document readiness to interactive. If there are deferred scripts needing to be parsed, it will do so, then fire the DOMContentLoaded, after which the readiness is set to complete. The Document can now handle post-load tasks, after which point the document is marked as completely loaded.

    +

    When a user requests a web site or application, to populate the browser the user agent goes through a series of steps, including a {{glossary('DNS')}} lookup, {{glossary('TCP handshake')}}, and SSL negotiation, before the user agent makes the actual request and the servers return the requested assets. The browser then parses the content received, builds the DOM, CSSOM, accessibility, and render trees, eventually rendering the page. Once the user agent stops parsing the document, the user agent sets the document readiness to interactive. If there are deferred scripts needing to be parsed, it will do so, then fire the DOMContentLoaded, after which the readiness is set to complete. The Document can now handle post-load tasks, after which point the document is marked as completely loaded.

    let navigationTimings = performance.getEntriesByType('navigation');
    diff --git a/files/en-us/web/performance/optimizing_startup_performance/index.html b/files/en-us/web/performance/optimizing_startup_performance/index.html index 4237dc22079f0ec..b080ff5f44ba7fe 100644 --- a/files/en-us/web/performance/optimizing_startup_performance/index.html +++ b/files/en-us/web/performance/optimizing_startup_performance/index.html @@ -14,7 +14,7 @@

    Starting up nicely

    Regardless of platform, it's always a good idea to start up as quickly as possible. Since that's a universal issue, we won't be focusing on it too much here. Instead, we're going to look at a more important issue when building Web apps: starting up as asynchronously as possible. That means not running all your startup code in a single event handler on the app's main thread.

    -

    Instead, you should write your code so that your app creates a Web worker that does as much as possible in a background thread (for example, fetching and processing data.) Then, anything that must be done on the main thread (such as user events and rendering UI) should be broken up into small pieces so that the app's event loop continues to cycle while it starts up. This will prevent the app, browser, and/or device from appearing to have locked up.

    +

    Instead, you should write your code so that your app creates a Web worker that does as much as possible in a background thread (for example, fetching and processing data.) Then, anything that must be done on the main thread (such as user events and rendering UI) should be broken up into small pieces so that the app's event loop continues to cycle while it starts up. This will prevent the app, browser, and/or device from appearing to have locked up.

    Why is it important to be asynchronous? Other than the reasons suggested above, consider the impact of a non-responsive page or user interface. The user is unable to cancel if they launched your app by mistake. If the app is being run in a browser, it's possible the user may get an "unresponsive app" or "slow script" notification. You should present some kind of interface, such as a progress bar, so that the user knows how much longer they'll need to wait while your app starts up.

    @@ -24,7 +24,7 @@

    Where there's a will...

    On the other hand, however, it can get tricky when you're porting an existing app to the Web. A desktop application doesn't need to be written in an asynchronous fashion because usually the operating system handles that for you, or the app is the only thing that matters which is currently running, depending on the operating environment. The source application might have a main loop that can easily be made to operate asynchronously (by running each main loop iteration separately); startup is often just a continuous, monolithic procedure that might periodically update a progress meter.

    -

    While you can use Web workers to run even very large, long-duration chunks of JavaScript code asynchronously, there's a huge caveat that: workers don't have access to WebGL or audio, and they can't send synchronous messages to the main thread, so you can't even proxy those APIs to the main thread. This all means that unless you can easily pull out the "pure calculation" chunks of your startup process into workers, you'll wind up having to run most or all of your startup code on the main thread.

    +

    While you can use Web workers to run even very large, long-duration chunks of JavaScript code asynchronously, there's a huge caveat that: workers don't have access to WebGL or audio, and they can't send synchronous messages to the main thread, so you can't even proxy those APIs to the main thread. This all means that unless you can easily pull out the "pure calculation" chunks of your startup process into workers, you'll wind up having to run most or all of your startup code on the main thread.

    However, even code like that can be made asynchronous, with a little work.

    @@ -74,7 +74,7 @@

    Other suggestions

    See also

    diff --git a/files/en-us/web/performance/performance_budgets/index.html b/files/en-us/web/performance/performance_budgets/index.html index 3ed2b1d5d9e2fd5..bbaac7141b0d22f 100644 --- a/files/en-us/web/performance/performance_budgets/index.html +++ b/files/en-us/web/performance/performance_budgets/index.html @@ -44,9 +44,9 @@

    How do I define a performance budg

    A default baseline to reduce bounce rate is to achieve Time to Interactive under 5 seconds in 3G/4G, and under 2 seconds for subsequent loads. However, based on the specific goals and content of your site, you might choose to focus on other metrics.

    -

    For a text-heavy site such as a blog or a news site, the First Contentful Paint metric could reflect more closely the user behavior. (i.e. How fast can users start reading), which will inform file specific budgets (e.g. Font size), and their optimizations. (e.g. Using font-display to improve Perceived Performance).

    +

    For a text-heavy site such as a blog or a news site, the First Contentful Paint metric could reflect more closely the user behavior. (i.e. How fast can users start reading), which will inform file specific budgets (e.g. Font size), and their optimizations. (e.g. Using font-display to improve Perceived Performance).

    -

    The ultimate value of a Performance Budget is to correlate the impact of Performance on business or product goals. When defining metrics, you should focus on User Experience, which will dictate not only the bounce or conversion rate but how likely is that user to return.

    +

    The ultimate value of a Performance Budget is to correlate the impact of Performance on business or product goals. When defining metrics, you should focus on User Experience, which will dictate not only the bounce or conversion rate but how likely is that user to return.

    How do I implement a performance budget?

    diff --git a/files/en-us/web/progressive_web_apps/add_to_home_screen/index.html b/files/en-us/web/progressive_web_apps/add_to_home_screen/index.html index 9eb940c07621649..8797bbe504b134c 100644 --- a/files/en-us/web/progressive_web_apps/add_to_home_screen/index.html +++ b/files/en-us/web/progressive_web_apps/add_to_home_screen/index.html @@ -20,7 +20,7 @@

    What browsers support A2HS?

    A2HS is supported in all mobile browsers, except iOS webview. It's also supported in some Chromium desktop browsers.

    -

    Firefox has had mobile support since v58.

    +

    Firefox has had mobile support since v58.

    See caniuse.com for exact details.

    diff --git a/files/en-us/web/progressive_web_apps/developer_guide/installing/index.html b/files/en-us/web/progressive_web_apps/developer_guide/installing/index.html index b1d9b6ff3c87663..9b317a3a46dd414 100644 --- a/files/en-us/web/progressive_web_apps/developer_guide/installing/index.html +++ b/files/en-us/web/progressive_web_apps/developer_guide/installing/index.html @@ -73,7 +73,7 @@

    Google Chrome for Android

    Safari for iOS / iPhoneOS / iPadOS

    -

    On Apple's iOS (including iPhoneOS and iPadOS), the Safari browser built into the device has some support for web applications, including support for the add to home screen feature. To add a web app to the home screen (also known as the launcher or springboard), tap the sharing button (Square and arrow sharing icon from iOS and macOS) at the bottom of the screen:

    +

    On Apple's iOS (including iPhoneOS and iPadOS), the Safari browser built into the device has some support for web applications, including support for the add to home screen feature. To add a web app to the home screen (also known as the launcher or springboard), tap the sharing button (Square and arrow sharing icon from iOS and macOS) at the bottom of the screen:

    Screenshot showing the location of the Share button in Safari on iOS 13

    diff --git a/files/en-us/web/progressive_web_apps/introduction/index.html b/files/en-us/web/progressive_web_apps/introduction/index.html index 33310526225ceaf..16883624a80e30b 100644 --- a/files/en-us/web/progressive_web_apps/introduction/index.html +++ b/files/en-us/web/progressive_web_apps/introduction/index.html @@ -43,14 +43,14 @@

    What makes an app a PWA?

    There are some key principles a web app should try to observe to be identified as a PWA. It should be:

      -
    • Discoverable, so the contents can be found through search engines.
      • -
    • Installable, so it can be available on the device's home screen or app launcher.
      • -
    • Linkable, so you can share it by sending a URL.
      • -
    • Network independent, so it works offline or with a poor network connection.
      • -
    • Progressive, so it's still usable on a basic level on older browsers, but fully-functional on the latest ones.
      • -
    • Re-engageable, so it's able to send notifications whenever there's new content available.
      • -
    • Responsive, so it's usable on any device with a screen and a browser—mobile phones, tablets, laptops, TVs, refrigerators, etc.
      • -
    • Safe, so the connections between the user, the app, and your server are secured against any third parties trying to get access to sensitive data.
      • +
    • Discoverable, so the contents can be found through search engines.
      • +
    • Installable, so it can be available on the device's home screen or app launcher.
      • +
    • Linkable, so you can share it by sending a URL.
      • +
    • Network independent, so it works offline or with a poor network connection.
      • +
    • Progressive, so it's still usable on a basic level on older browsers, but fully-functional on the latest ones.
      • +
    • Re-engageable, so it's able to send notifications whenever there's new content available.
      • +
    • Responsive, so it's usable on any device with a screen and a browser—mobile phones, tablets, laptops, TVs, refrigerators, etc.
      • +
    • Safe, so the connections between the user, the app, and your server are secured against any third parties trying to get access to sensitive data.

    Offering these features and making use of all the {{anch("Advantages of web applications", "advantages")}} offered by web applications can create a compelling, highly flexible offering for your users and customers.

    diff --git a/files/en-us/web/progressive_web_apps/responsive/graphics_for_responsive_sites/index.html b/files/en-us/web/progressive_web_apps/responsive/graphics_for_responsive_sites/index.html index f8d3b74d0c953f6..49763e0e5998da3 100644 --- a/files/en-us/web/progressive_web_apps/responsive/graphics_for_responsive_sites/index.html +++ b/files/en-us/web/progressive_web_apps/responsive/graphics_for_responsive_sites/index.html @@ -20,9 +20,9 @@

    Serving images selectively via CSSIn general, you will use mostly the same graphical assets for different layouts in a responsive design, but you may well include slightly different ones dependant on context. For example, if your desktop layout includes a large header graphic and several programmatic graphics (e.g. CSS3 drop shadows and gradients), you may want to simplify or remove certain assets for the site's mobile layout, or even provide smaller assets to suit the smaller screen better. This is because in general mobile devices will have less processing power and bandwidth available, so you want to reduce the processing and downloads. In addition, mobile devices have smaller screen sizes, so it makes sense to reduce visual clutter on a mobile layout.

    -

    CSS media queries allow us to serve different CSS rules dependant on viewport dimensions, and you should consider using mobile first media queries where possible. This means that the default layout before any media queries are encountered in the CSS is the small screen/mobile layout, not the wide screen/desktop layout. So when the page is loaded on a mobile device, the mobile will only download the mobile assets, and not the desktop resource assets.

    +

    CSS media queries allow us to serve different CSS rules dependant on viewport dimensions, and you should consider using mobile first media queries where possible. This means that the default layout before any media queries are encountered in the CSS is the small screen/mobile layout, not the wide screen/desktop layout. So when the page is loaded on a mobile device, the mobile will only download the mobile assets, and not the desktop resource assets.

    -

    Making HTML <img>s responsive is not as easy, as there is currently no native mechanism to serve different HTML images depending on context. There are a number of workarounds, but none of them are perfect right now. For an overview of what's available, read Choosing a responsive image solution.

    +

    Making HTML <img>s responsive is not as easy, as there is currently no native mechanism to serve different HTML images depending on context. There are a number of workarounds, but none of them are perfect right now. For an overview of what's available, read Choosing a responsive image solution.

    Coping with different resolutions

    @@ -32,7 +32,7 @@

    Coping with different resolutions

    high res and low res image copies
    One option here is to create a hi res and a low res set of images, then use resolution media queries to serve the hi res images only to hi res devices.
    Programmatic images
    -
    You should also try to use programmatic/vector graphics as much as possible, as they theoretically scale infinitely so will still look crisp at high resolutions. You could use CSS3 properties for generating effects like drop shadows, gradients and rounded corners, and you could also consider using SVG for other UI elements, instead of raster graphics formats. The downsides here are that CSS3 properties and SVG don't work on old browsers such as IE6-8 (although Polyfills are available, and you could build in fallbacks), and SVG isn't suitable for high detail images, such as photographs.
    +
    You should also try to use programmatic/vector graphics as much as possible, as they theoretically scale infinitely so will still look crisp at high resolutions. You could use CSS3 properties for generating effects like drop shadows, gradients and rounded corners, and you could also consider using SVG for other UI elements, instead of raster graphics formats. The downsides here are that CSS3 properties and SVG don't work on old browsers such as IE6-8 (although Polyfills are available, and you could build in fallbacks), and SVG isn't suitable for high detail images, such as photographs.
    Using fonts for icons
    Another technique to consider is using web fonts for icons. Text is infinitely scalable on the web, and you can also use CSS text properties to style your web font icons, such as text-shadow and color. Making your own font file can be a bit fiddly, but there are a number of good icon font services available such as font awesome.
    @@ -43,12 +43,12 @@

    Interactive images

    CSS
    -
    As well as adding programmatic graphical effects to links (and anywhere else you might want them), CSS3 also allows you to write declarative animations and transitions. These may not be supported in older browsers like IE6-8, but they generally degrade gracefully, are fairly easy to write, and become much more flexible and powerful when combined with JavaScript and other technologies.
    +
    As well as adding programmatic graphical effects to links (and anywhere else you might want them), CSS3 also allows you to write declarative animations and transitions. These may not be supported in older browsers like IE6-8, but they generally degrade gracefully, are fairly easy to write, and become much more flexible and powerful when combined with JavaScript and other technologies.
    JavaScript
    JavaScript has functions that enable developers to create animations, and any other type of interactivity you want. It is very powerful when combined with other technologies, although its complexity is a barrier for non-developers.
    SVG
    -
    SVG, just like HTML/CSS, can be manipulated via JavaScript. So adding interactivity is not difficult. You can also add links direcly into SVG and can create animations using SMIL (Synchronized Multimedia Intergration Language).
    +
    SVG, just like HTML/CSS, can be manipulated via JavaScript. So adding interactivity is not difficult. You can also add links direcly into SVG and can create animations using SMIL (Synchronized Multimedia Intergration Language).
    WebGL/Canvas
    -
    You can create a canvas to draw interactive graphics on using the HTML <canvas> element, then use the Canvas API to create shapes, lines, import image files, create text, do compositing operations, and much more. Standard JavaScript can then be used to animate the image output, etc. You can create 2D imagery using the regular 2D canvas context, or 3D imagery using the more nascent WebGL API.
    +
    You can create a canvas to draw interactive graphics on using the HTML <canvas> element, then use the Canvas API to create shapes, lines, import image files, create text, do compositing operations, and much more. Standard JavaScript can then be used to animate the image output, etc. You can create 2D imagery using the regular 2D canvas context, or 3D imagery using the more nascent WebGL API.
    Canvas is very powerful, but it needs to be used with caution. It is good for the visuals of games and complex data visualisions, but for standard user interface elements it is not very efficient. In addition, Canvases are just raster images, so the text created inside them is not accessible, plus they don't scale well.
    diff --git a/files/en-us/web/progressive_web_apps/responsive/media_types/index.html b/files/en-us/web/progressive_web_apps/responsive/media_types/index.html index dbf1a504cae9915..1ab52d17418eebf 100644 --- a/files/en-us/web/progressive_web_apps/responsive/media_types/index.html +++ b/files/en-us/web/progressive_web_apps/responsive/media_types/index.html @@ -12,7 +12,7 @@ ---
    {{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/Responsive/")}}
    -

    This is the 14th and last section of Part I of the CSS Getting Started tutorial. Many pages in this tutorial focused on the CSS properties and values, as well as how you use these to specify the way that content displays.

    +

    This is the 14th and last section of Part I of the CSS Getting Started tutorial. Many pages in this tutorial focused on the CSS properties and values, as well as how you use these to specify the way that content displays.

    Information: Media

    @@ -238,7 +238,7 @@

    More details

    Action: Printing a document

    -

    Note: This snippet only works on Firefox since it erroneously increments the CSS counter for fix-position elements. It should not work in other browsers. See issue on css3-page.

    +

    Note: This snippet only works on Firefox since it erroneously increments the CSS counter for fix-position elements. It should not work in other browsers. See issue on css3-page.

      @@ -391,10 +391,10 @@

      Challenges

      -

      See solutions to these challenges.

      +

      See solutions to these challenges.

      What next?

      If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

      -

      So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: JavaScript.

      +

      So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: JavaScript.

      diff --git a/files/en-us/web/progressive_web_apps/responsive/mobile_first/index.html b/files/en-us/web/progressive_web_apps/responsive/mobile_first/index.html index 777fc9be6a4a1b8..c25493389b3a696 100644 --- a/files/en-us/web/progressive_web_apps/responsive/mobile_first/index.html +++ b/files/en-us/web/progressive_web_apps/responsive/mobile_first/index.html @@ -24,7 +24,7 @@

      First things first — mobil
      • If you are serving different styling and layout information for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather than having desktop/wider screen styling first. This way, mobile devices don't have to load assets and other information twice.
        • -
      • If you are using mechanisms like feature detection and matchMedia to conditionally load scripting functionality depending on viewport size, feature support, etc., you should just load the very basics that pretty much all browsers will need first, then progressively enhance browsers higher up the food chain.
        • +
      • If you are using mechanisms like feature detection and matchMedia to conditionally load scripting functionality depending on viewport size, feature support, etc., you should just load the very basics that pretty much all browsers will need first, then progressively enhance browsers higher up the food chain.
      diff --git a/files/en-us/web/reference/api/index.html b/files/en-us/web/reference/api/index.html index 0a8836f7ed8cf40..a373a4b552762a0 100644 --- a/files/en-us/web/reference/api/index.html +++ b/files/en-us/web/reference/api/index.html @@ -8,23 +8,23 @@ - Web - web design --- -

      The Web offers a wide variety of APIs to perform various useful tasks. These can be accessed using JavaScript code, and let you do anything from making minor adjustments to any {{domxref("window")}} or {{domxref("element")}}, to generating intricate graphical and audio effects using APIs such as WebGL and Web Audio.

      +

      The Web offers a wide variety of APIs to perform various useful tasks. These can be accessed using JavaScript code, and let you do anything from making minor adjustments to any {{domxref("window")}} or {{domxref("element")}}, to generating intricate graphical and audio effects using APIs such as WebGL and Web Audio.

      Each individual interface across all APIs is listed in the index.

      -

      There's also a listing of all available events in the event reference.

      +

      There's also a listing of all available events in the event reference.

      -
      Document Object Model
      +
      Document Object Model
      The DOM is an API that allows access to and modification of the current document. It allows manipulation of document {{domxref("Node")}} and {{domxref("Element")}}. HTML, XML and SVG have extended it to manipulate their specific elements.
      Device APIs
      -
      This set of APIs allows access to various hardware features available to Web pages and applications. E.g. Ambient Light Sensor API, Geolocation API, Pointer Lock API, Proximity API, Device Orientation API, Screen Orientation API, Vibration API.
      +
      This set of APIs allows access to various hardware features available to Web pages and applications. E.g. Ambient Light Sensor API, Geolocation API, Pointer Lock API, Proximity API, Device Orientation API, Screen Orientation API, Vibration API.
      Communication APIs
      -
      These APIs let Web pages and applications communicate with other pages or devices. E.g. Network Information API, Web Notifications, Simple Push API.
      +
      These APIs let Web pages and applications communicate with other pages or devices. E.g. Network Information API, Web Notifications, Simple Push API.
      Data management APIs
      -
      User data can be stored and managed using this set of APIs. E.g. FileHandle API, IndexedDB.
      +
      User data can be stored and managed using this set of APIs. E.g. FileHandle API, IndexedDB.
      diff --git a/files/en-us/web/reference/index.html b/files/en-us/web/reference/index.html index bf4fdf159e82df6..f8425d90abbb805 100644 --- a/files/en-us/web/reference/index.html +++ b/files/en-us/web/reference/index.html @@ -15,11 +15,11 @@
      HTML — Structuring the web
      HyperText Markup Language is used to define and describe semantically the content (markup) of a web page in a well-structured format. HTML provides a means to create structured documents made up of blocks called HTML elements that are delineated by tags, written using angle brackets. Some introduce content into the page directly, others provide information about document text and may include other tags as sub-elements. Obviously, browsers do not display them, since they are used to interpret the content of the page.

      - Introduction to HTML | Learn HTML | HTML5 | Developer guide | Element reference | Reference
      + Introduction to HTML | Learn HTML | HTML5 | Developer guide | Element reference | Reference
      CSS — Styling the web
      Cascading Style Sheets are used to describe the appearance of web content.

      - Introduction to CSS | Getting started with CSS | Learn CSS | Common CSS questions | Reference
      + Introduction to CSS | Getting started with CSS | Learn CSS | Common CSS questions | Reference
      JavaScript — Dynamic client-side scripting
      The JavaScript programming language is used to add interactivity and other dynamic features to web sites.
      Learn JavaScript | Developer guide | Reference