aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/progressive_web_apps
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2021-07-28 12:32:33 -0400
committerGitHub <noreply@github.com>2021-07-29 00:32:33 +0800
commit6d3234e3f9ff37cbd766dc00c607828ad6f34a53 (patch)
tree1fd72c8daa9ab98415f1fc0cad527ce0c5df2552 /files/zh-cn/web/progressive_web_apps
parent43a2fc260b557fa0f6f2a3c1d9da94d61fa9b732 (diff)
downloadtranslated-content-6d3234e3f9ff37cbd766dc00c607828ad6f34a53.tar.gz
translated-content-6d3234e3f9ff37cbd766dc00c607828ad6f34a53.tar.bz2
translated-content-6d3234e3f9ff37cbd766dc00c607828ad6f34a53.zip
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
Diffstat (limited to 'files/zh-cn/web/progressive_web_apps')
-rw-r--r--files/zh-cn/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html14
1 files changed, 7 insertions, 7 deletions
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
<p>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.</p>
<div class="note">
-<p><strong>Note:</strong> You can find the <a href="https://github.com/chrisdavidmills/snapshot" title="https://github.com/chrisdavidmills/snapshot">Snapshot app on Github</a>; check out the code and help improve it. You can also see <a href="https://chrisdavidmills.github.io/snapshot/" title="https://chrisdavidmills.github.io/snapshot/">Snapshot running live</a>. Note that <code>getUserMedia()</code> 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.</p>
+<p><strong>Note:</strong> You can find the <a href="https://github.com/chrisdavidmills/snapshot" title="https://github.com/chrisdavidmills/snapshot">Snapshot app on Github</a>; check out the code and help improve it. You can also see <a href="https://chrisdavidmills.github.io/snapshot/">Snapshot running live</a>. Note that <code>getUserMedia()</code> 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.</p>
</div>
<p>Our desktop layout for Snapshot is three columns, containing the camera viewer, image capture view, and gallery, respectively.</p>
@@ -48,7 +48,7 @@ translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_b
&lt;/x-deck&gt;</pre>
<div class="note">
-<p><strong>Note:</strong> These weird x- elements may be unfamiliar; they are part of <a href="http://mozbrick.github.io/" title="http://mozilla.github.io/brick/">Brick</a>, 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.</p>
+<p><strong>Note:</strong> These weird x- elements may be unfamiliar; they are part of <a href="http://mozbrick.github.io/">Brick</a>, 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.</p>
</div>
<p>To get these sitting side-by-side we have used the following rules:</p>
@@ -232,7 +232,7 @@ x-card:nth-child(3) {
<p>Last, we have used <code>flex: 1;</code> 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.</p>
-<p><img alt="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." src="https://mdn.mozillademos.org/files/5939/mobile-layout.png" style="float: left; height: 417px; margin-right: 2rem; width: 304px;">But there are more tricks up our sleeves for this mobile app layout! As mentioned above, we used <a href="http://mozilla.github.io/brick/" title="http://mozilla.github.io/brick/">Mozilla Brick</a>, a collection of ready-rolled mobile UI components, in the making of the mobile app layout. In particular, we used the <a href="http://mozilla.github.io/brick/docs.html#deck" title="http://mozilla.github.io/brick/docs.html#deck">deck</a> component for the nice transition effect between cards when the buttons are pressed. For more on using Brick, read <a href="/en-US/docs/Web/Apps/app_layout/Mozilla_Brick_ready_made_UI_components" title="/en-US/docs/Web/Apps/app_layout/Mozilla_Brick_ready_made_UI_components">Mozilla Brick: ready made UI components</a>.</p>
+<p><img alt="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." src="https://mdn.mozillademos.org/files/5939/mobile-layout.png" style="float: left; height: 417px; margin-right: 2rem; width: 304px;">But there are more tricks up our sleeves for this mobile app layout! As mentioned above, we used <a href="http://mozilla.github.io/brick/" title="http://mozilla.github.io/brick/">Mozilla Brick</a>, a collection of ready-rolled mobile UI components, in the making of the mobile app layout. In particular, we used the <a href="http://mozilla.github.io/brick/docs.html#deck">deck</a> component for the nice transition effect between cards when the buttons are pressed. For more on using Brick, read <a href="/en-US/docs/Web/Apps/app_layout/Mozilla_Brick_ready_made_UI_components" title="/en-US/docs/Web/Apps/app_layout/Mozilla_Brick_ready_made_UI_components">Mozilla Brick: ready made UI components</a>.</p>
<p>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 <code>media</code> attribute:</p>
@@ -393,13 +393,13 @@ x-card:nth-child(3) {
<p>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:</p>
<dl>
- <dt><a href="https://github.com/teleject/hisrc" title="https://github.com/teleject/hisrc">HiSRC</a></dt>
+ <dt><a href="https://github.com/teleject/hisrc">HiSRC</a></dt>
<dd>A <a href="http://jquery.com" title="http://jquery.com">jQuery</a> 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.</dd>
- <dt><a href="http://www.mobify.com/mobifyjs/v2/docs/capturing/" title="http://www.mobify.com/mobifyjs/v2/docs/capturing/">Mobify.js capturing</a></dt>
+ <dt><a href="http://www.mobify.com/mobifyjs/v2/docs/capturing/">Mobify.js capturing</a></dt>
<dd>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 <code>src</code> values with JavaScript depending on browser features, circumventing browser preloading issues. This is promising, but doesn't work very well across older browsers.</dd>
- <dt><a href="https://github.com/scottjehl/picturefill" title="https://github.com/scottjehl/picturefill">Picturefill</a></dt>
+ <dt><a href="https://github.com/scottjehl/picturefill">Picturefill</a></dt>
<dd>A JavaScript-based polyfill for <code>&lt;picture&gt;</code>, which works nicely, but it does require a lot of custom markup.</dd>
- <dt><a href="http://adaptive-images.com/" title="http://adaptive-images.com/">Adaptive images</a></dt>
+ <dt><a href="http://adaptive-images.com/">Adaptive images</a></dt>
<dd>A server-side solution, which records the viewport size in a cookie, then resizes images via a combination of PHP and <code>.htaccess</code> to a more appropriate size, if appropriate. This doesn't require markup or scripting, but has a number of limitations.</dd>
</dl>