From 6d3234e3f9ff37cbd766dc00c607828ad6f34a53 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Wed, 28 Jul 2021 12:32:33 -0400 Subject: remove link 'title' attributes that's just the 'href' (zh-cn, part 2) (#1730) * remove link 'title' attributes that's just the 'href' (zh-cn, part 2) * more fixes --- .../responsive_design_building_blocks/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'files/zh-cn/web/progressive_web_apps') diff --git a/files/zh-cn/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html b/files/zh-cn/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html index 0c644f8724..fa8fc121d3 100644 --- a/files/zh-cn/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html +++ b/files/zh-cn/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html @@ -26,7 +26,7 @@ translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_b

We've written a simple-but-fun prototype for an application called Snapshot, which takes a video stream from your webcam (using {{domxref("navigator.getUserMedia", "getUserMedia()")}}) then allows you to capture stills from that video stream (using HTML5 {{HTMLElement("canvas")}}), and save them to a gallery. You can then view previously-captured images and delete them. Other articles will discuss the functionality in more detail, but here we're interested in the layout.

-

Note: You can find the Snapshot app on Github; check out the code and help improve it. You can also see Snapshot running live. Note that getUserMedia() is an experimental technology, which currently only works in Google Chrome and Firefox desktop. More functionality and a clean up of the styling of Snapshot are planned for a future date.

+

Note: You can find the Snapshot app on Github; check out the code and help improve it. You can also see Snapshot running live. Note that getUserMedia() is an experimental technology, which currently only works in Google Chrome and Firefox desktop. More functionality and a clean up of the styling of Snapshot are planned for a future date.

Our desktop layout for Snapshot is three columns, containing the camera viewer, image capture view, and gallery, respectively.

@@ -48,7 +48,7 @@ translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_b </x-deck>
-

Note: These weird x- elements may be unfamiliar; they are part of Brick, Mozilla's UI element library for mobile web apps. We have used Brick to create the mobile layout for Snapshot, which you will read more about below.

+

Note: These weird x- elements may be unfamiliar; they are part of Brick, Mozilla's UI element library for mobile web apps. We have used Brick to create the mobile layout for Snapshot, which you will read more about below.

To get these sitting side-by-side we have used the following rules:

@@ -232,7 +232,7 @@ x-card:nth-child(3) {

Last, we have used flex: 1; to make the buttons always take up the same proportion of space on the line. Let's have a look at the mobile layout, in the below image.

-

single column layout for mobile app view, with three buttons to navigate between cards, an image viewer, and a Save Picture button at the button.But there are more tricks up our sleeves for this mobile app layout! As mentioned above, we used Mozilla Brick, a collection of ready-rolled mobile UI components, in the making of the mobile app layout. In particular, we used the deck component for the nice transition effect between cards when the buttons are pressed. For more on using Brick, read Mozilla Brick: ready made UI components.

+

single column layout for mobile app view, with three buttons to navigate between cards, an image viewer, and a Save Picture button at the button.But there are more tricks up our sleeves for this mobile app layout! As mentioned above, we used Mozilla Brick, a collection of ready-rolled mobile UI components, in the making of the mobile app layout. In particular, we used the deck component for the nice transition effect between cards when the buttons are pressed. For more on using Brick, read Mozilla Brick: ready made UI components.

What's more relevant to this article is that we didn't want the Brick CSS and JavaScript files being applied to the markup unless we were looking at the mobile app view. To achieve this, we applied the Brick CSS to the page using a separate {{HTMLElement("link")}} element with a media attribute:

@@ -393,13 +393,13 @@ x-card:nth-child(3) {

This all sounds good. But those solutions are definitely not ready for production yet — both are in a very early stage of standardization, and have no support across browsers. Currently we have to rely on various polyfills and other solutions, none of which are perfect for all situations, so you need to decide which one is right for your particular situation. Some available solutions are as follows:

-
HiSRC
+
HiSRC
A jQuery plugin that allows you to create small, medium, and large versions of an image, and then serves the appropriate one according to the browser's resolution and available network speed.
-
Mobify.js capturing
+
Mobify.js capturing
A very clever technique from Mozilla that allows you to capture the source of the page before it's parsed. This way, you can swap out image src values with JavaScript depending on browser features, circumventing browser preloading issues. This is promising, but doesn't work very well across older browsers.
-
Picturefill
+
Picturefill
A JavaScript-based polyfill for <picture>, which works nicely, but it does require a lot of custom markup.
-
Adaptive images
+
Adaptive images
A server-side solution, which records the viewport size in a cookie, then resizes images via a combination of PHP and .htaccess to a more appropriate size, if appropriate. This doesn't require markup or scripting, but has a number of limitations.
-- cgit v1.2.3-54-g00ecf