请选择 进入手机版 | 继续访问电脑版

网络科技

    今日:54| 主题:285157
收藏本版
互联网、科技极客的综合动态。

[其他] What’s New in HTML 5.1

[复制链接]
枕梦 发表于 2016-12-1 12:55:09
165 7

What’s New in HTML 5.1

What’s New in HTML 5.1-1-网络科技-The,Images,of,to,and

  A glimpse of HTML 5.1

  The release of the HTML5 standard about two years ago was a big deal in the web development community. Not only because it came packing an impressive list of new features, but also because it was the first major update to HTML since HTML 4.01 was released in 1999. You can still see some websites bragging about the use of the “modern” HTML5 standard today.
   Fortunately, we didn’t have to wait quite that long for the next iteration of HTML. In October 2015, the W3C started working on the draft of HTML 5.1 with the goal of fixing some of the issues that were left open in HTML5. After many iterations, it reached the state of “Candidate Recommendation” in June 2016, “Proposed Recommendation” in September 2016 and finally a W3C Recommendation in November 2016. Those who followed this development probably noticed that it was a bumpy ride. A lot of initial HTML 5.1 features were dropped due to poor design or a lack of browser vendor support.
   While HTML 5.1 was still in development, the W3C has already started working on a draft of HTML 5.2 which is expected to be released in late 2017. In the meantime, here’s an overview of some of the interesting new features and improvements introduced in 5.1. Browser support is still lacking for these features but we’ll refer you to at least some browsers which can be used to test each example.
   Context Menus Using the menu and menuitems Elements

   The draft version of 5.1 introduced two different kinds of menu elements: context and toolbar . The former is used to extend the native context menus, usually displayed by right-clicking on the page, and the latter was intended to define plain menu components. In the process of development, toolbar was dropped, but the context menu still remains.
   You can use the  <menu>  tag to define a menu consisting of one or several  <menuitem>  elements and then bind it to any element using the  contextmenu  attribute.
   Each <menuitem> can have one of the three types:
  
       
  • checkbox – allows you to select or deselect an option;   
  • command – allows you to execute an action on click;   
  • radio – allows you to select one option from a group.  
  Here’s a basic usage example which works in Firefox 49, but doesn’t seem to work in Chrome 54.
   See the Pen HTML 5.1 menu example by SitePoint ( @SitePoint ) on CodePen .
  In a supported browser, that context menu should look like so:
     

What’s New in HTML 5.1

What’s New in HTML 5.1-2-网络科技-The,Images,of,to,and
   Context menu with custom items
    Details and Summary Elements

   The new  <details>  and  <summary>  elements implement the ability to show and hide a block of additional information by clicking on an element. This is something that’s often done using JavaScript which can now be done using the <details> element with a <summary> element inside it. Clicking on the summary toggles the visibility of the rest of the content from the <details> element.
  The following example has been tested in Firefox and Chrome.
   See the Pen HTML 5.1 details and summary demo by SitePoint ( @SitePoint ) on CodePen .
  That demo in a supported browser should look like so:
   

What’s New in HTML 5.1

What’s New in HTML 5.1-3-网络科技-The,Images,of,to,and

   More input types — month , week and datetime-local

   The arsenal of input types has been extended with three more input types:  month  ,  week  and  datetime-local  .
   The first two of these will allow you to select a week or a month. In Chrome, both of them are rendered as a dropdown calendar which either allows you to select a particular month of the year or a week. When you access the values from JavaScript you will receive a string looking approximately like these: "2016-W43" for the week input and "2016-10" for the month input.
   Initially, the drafts of 5.1 introduced two date-time inputs — datetime and datetime-local . The difference was that datetime-local always selected the time in the user’s timezone, while the datetime input would also allow you to select a different timezone. During development, datetime type was dropped and now only datetime-local remains. The datetime-local input consists of two parts — the date, which can be selected in a similar way to the week or month input, and the time part, which can be typed in separately.
  You can find some living examples of all of these new input types in the CodePen below. It works in Chrome but does not yet work in Firefox:
   See the Pen HTML 5.1 week, month and datetime inputs by SitePoint ( @SitePoint ) on CodePen .
  That demo in a supported browser should look like so:
   

What’s New in HTML 5.1

What’s New in HTML 5.1-4-网络科技-The,Images,of,to,and

  Responsive Images

  HTML 5.1 includes several new features for implementing responsive images without the use of CSS. Each of these features covers their individual use case.
   The srcset Image Attribute

   The  srcset  image attribute allows you to list multiple alternative image sources which vary in pixel density. This allows the browser to pick an image of the appropriate quality for the user’s device (determined by its own pixel density, zoom level or network speed). For example, you might want to provide a lower resolution image for users with small phones on slower mobile networks.
   The srcset attribute accepts a comma-separated list of image URLs each with its own x modifier, which describes the pixel ratio (amount of physical pixels in a CSS pixel) most appropriate for each image. A simple example looks like so:
  1. <img src="images/low-res.jpg" srcset="
  2.   images/low-res.jpg 1x,
  3.   images/high-res.jpg 2x,
  4.   images/ultra-high-res.jpg 3x"
  5. >
复制代码
  In this case, if the users’s pixel ratio is equal to 1, the low-res image will be displayed, for 2, high-res will be shown and for 3 and above, ultra-high-res will be chosen.
   Alternatively, you can choose to display images of different sizes instead of different pixel ratios. This can be done using the w modifier:
  1. <img src="images/low-res.jpg" srcset="
  2.   images/low-res.jpg 600w,
  3.   images/high-res.jpg 1000w,
  4.   images/ultra-high-res.jpg 1400w"
  5. >
复制代码
  In this case, the low-res image is defined to be 600px wide, high-res to be 1000px and ultra-high-res to be 1400px.
   The sizes Image Attribute

   You might want to display images differently depending on the user’s screen size. For example, you could show a series of images laid out in two columns for wide screens and laid out in just one for more narrow screens. This can be achieved using the sizes attribute. It allows you to translate the width of the screen into the space allocated for an image and then pick the appropriate image using the srcset attribute. Here’s an example:
  1. <img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw"
  2.   srcset="images/low-res.jpg 600w,
  3.   images/high-res.jpg 1000w,
  4.   images/ultra-high-res.jpg 1400w"
  5. >
复制代码
The sizes attribute defines the width of the image as 50% of the width of the viewport when the width of the viewport is greater than 40em, or 100% of the width when its lower or equal to 40em.
   The picture Element

   If it’s not enough for you to change the size of the images for each screen and you need the ability to show completely different images, then you can use the  picture  element. It allows you to define images with various sources for different screen sizes by wrapping your <img> with a <picture> element and specifying multiple child <source> elements. The <source> element then acts as the source of URLs to load the images.
  1. <picture>
  2.   <source media="(max-width: 20em)" srcset="
  3.     images/small/low-res.jpg 1x,
  4.     images/small/high-res.jpg 2x,
  5.     images/small/ultra-high-res.jpg 3x
  6.   ">
  7.   <source media="(max-width: 40em)" srcset="
  8.     images/large/low-res.jpg 1x,
  9.     images/large/high-res.jpg 2x,
  10.     images/large/ultra-high-res.jpg 3x
  11.   ">

  12.   <img src="images/large/low-res.jpg">
  13. </picture>
复制代码
  If you’re curious to find more about responsive images, I suggest the SitePoint article on  How to Build Responsive Images with srcset  .
   Validating Forms with form.reportValidity()

   HTML5 defines the  form.checkValidity()  method which allows you to check the inputs of a form against the defined validators and returns a boolean value as a result. The new  reportValidity()  is very similar — it also allows you to validate a form and retrieve the result, but additionally reports the errors to the user right in the browser. Here’s a CodePen to demonstrate the result (tested in Firefox and Chrome):
   See the Pen HTML 5.1 report validity demo by SitePoint ( @SitePoint ) on CodePen .
  The “First name” input should be marked with an error since it’s required but empty. When working as expected, it looks like so:
   

What’s New in HTML 5.1

What’s New in HTML 5.1-5-网络科技-The,Images,of,to,and

  Allowfullscreen for Frames

   The new boolean  allowfullscreen  attribute for frames allows you to control whether their contents can present themselves on full screen by using the  requestFullscreen()  method.
   Spellchecking with element.forceSpellCheck()

   This new  element.forceSpellCheck()  method allows you to trigger spell check on text elements. This is also the first feature in this list that is not available in any of the browsers yet. Potentially, this could be used to perform spell checking on elements that haven’t been directly edited by the user.
  Features That Never Made It

  Some of the features defined in the first drafts of the specification were eventually removed, mostly due to lack of browser vendor interest. Here are some of the interesting mentions:
   The inert Attribute

   The inert attribute was meant to disable user interaction for all child elements. Kind of like adding the disabled attribute to each of them.
   The <dialog> Element

   The <dialog> element provided a native implementation for popup windows. There was even a convenient form integration in mind — setting the method attribute on <dialog> would prevent the form from submitting itself to the server, but rather close the dialog and return the value to the creator of the dialog.
  This feature seems to be still supported in Firefox, so here’s an example of how it looks:
   See the Pen HTML dialog element by SitePoint ( @SitePoint ) on CodePen .
     More from this author

   
       
  • Up and Running with ESLint — the Pluggable JavaScript Linter   
  • Visual Regression Testing with PhantomCSS   
    Additional Reading

   This is by no means a complete list of the changes in HTML 5.1. There are many minor new features, changes that have been adopted from the Living Standard and other unused features that have been removed. If you would like to check out a complete list of changes, have a read of the Changes section of the specification. In the meantime, let’s hope that the browser vendors will pick up the new features quickly!
  What aspects of HTML 5.1 are you most excited about? Let us know in the comments!
rainy823 发表于 2016-12-1 16:22:49
前排支持下!
回复 支持 反对

使用道具 举报

陈春 发表于 2016-12-1 16:38:00
幸福毕竟不是曹操,怎能说到就到。
回复 支持 反对

使用道具 举报

uc1026 发表于 2016-12-1 16:44:32
不回帖的话就太任性了
回复 支持 反对

使用道具 举报

angelayang 发表于 2016-12-5 01:17:02
边撸边过
回复 支持 反对

使用道具 举报

那傷丶壹直繞 发表于 2016-12-6 14:07:04
牛人 佩服!
回复 支持 反对

使用道具 举报

陈斌 发表于 2016-12-13 16:39:31
好,很好,非常好!
回复 支持 反对

使用道具 举报

tbf6gr 发表于 2016-12-17 04:39:18
谁抢沙发???
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表