美文网首页Web前端之路
W3C官方发布HTML5.2新特性

W3C官方发布HTML5.2新特性

作者: 辣瓜瓜 | 来源:发表于2018-01-11 15:39 被阅读45次

    在W3C当中,一般对版本的发布会经过四个阶段:
    1.工作草案(WD)
    2.备选推荐标准(CR)
    3.提案推荐标准(PR)
    4.W3C正式推荐标准(REC)
    当一个规范到达REC阶段时,就意味着它已经得到了W3C成员的正式认可,并推荐它由用户代理部署,前端工程师进行使用。
    2017年12月14日W3C发布了HTML规范5.2更新版本,这个版本相对之前的版本来说有了一些增加和删除,对于这些变更,都可以在HTML 5.2 Changes上看到。

    dialog元素

    HTML5.2新增dialog标签,可以实现一个对话框效果,使用其提供的方法进行显示和隐藏,并且具备一般对话框默认的遮罩效果。

    • open:dialog 属性,默认dialog 是隐藏的,写上open后显示。
    • show():显示dialog 的方法。
    • close():隐藏dialog 的方法。
    • showModal():显示dialog,并增加遮罩层的方法。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                dialog {
                    border: 4px dotted red;
                    background: #fff;
                }
            </style>
        </head>
        <body>
            <dialog id="dialog">
                <!--<dialog id="dialog" open>-->
                <h1>Add to Wallet</h1>
                <label for="num">How many gold coins do you want to add to your wallet?</label>
                <div><input name=amt id="num" type=number min=0 step=0.01 value=100></div>
                <p><strong>You add coins at your own risk.</strong></p>
                <div><label><input name=round type=checkbox> Only add perfectly round coins </label></div>
                <div><input type=button onclick="submit()" value="Add Coins"></div>
            </dialog>
            <script>
                const dialog = document.querySelector('#dialog')
                //dialog.show();
                dialog.showModal();
    
                function submit() {
                    dialog.close();
                }
            </script>
        </body>
    </html>
    

    dialog元素兼容性

    dialog兼容情况.jpg

    支付请求API(Payment Request API)

    在HTML5.2之前,对于支付请求的API是不能在iframe中来完成的,所以每次我们在进行移动支付时都需要跳转到另外一个支付页面才能完成付款。

    新版本的规范在iframe标签上新增了一些重要属性用于支持新的JavaScript API。其添加了allowpaymentrequest属性以允许iframe控制支付请求API的访问。

    这也意味着嵌入了第三方内容的页面能够控制该第三方内容是否可向用户请求获取支付凭证,进而让可嵌入的购物车工具可以利用新的API。

    该新标准让开发者可以创建一个简化的结帐页面,用户可以重复使用保存的付款和地址信息来加快结账速度,并减少错误输入。

    支付请求API已经可在Chrome、Edge和技术预览版的Safari中使用

    演示API(Presentation API)

    HTML5.2规范还增加了allowpresentation属性,该属性允许iframe可以访问演示API来让页面嵌入可以访问投影仪、监控器或网络连接电视等设备的第三方演示。演示API还只是一个W3C候选建议,目前只在Chrome上可用

    苹果图标的尺寸

    要定义网页图标,使用<link rel="icon">文档头部元素,使用sizes属性定义图标的尺寸

    <link rel="icon" sizes="16x16" href="http://www.xxx.com/images/iconku-logo.jpg">  
    

    在HTML 5.2之前,苹果的iOS设备不支持该sizes属性。为了解决这个问题,苹果公司推出appple-touch-icon可以用来定义设备上使用的图标。
    在HTML 5.2中,该规范现在允许对appple-touch-icon使用sizes属性,今后将可以为不同的苹果设备提供不同大小的图标。
    文章中写道,苹果设备目前仍然不支持这个sizes属性。

    多个<main>元素

    在HTML 5.2之前,<main>元素必须在DOM中是唯一的,才能使页面有效。
    随着单页应用程序的普及,这一规则很难适用,
    用HTML 5.2,可存在多个<main>元素,只要在给定的时间内只有一个对用户可见。任何额外的元素必须使用该hidden属性隐藏。

    <style>书写位置

    默认的内联样式写在<head>标签内,随着组件化开发的增加普及,已经出现将样式与结构写在一起的情况。在HTML 5.2中,内联样式可以写在html结构的任意位置。

    <body>  
        <div>内容开始</div>
        <style>
            div { background:red; }
        </style>
        <div>内容结束</div>
    </body> 
    

    样式元素应该最好用在文档的头部。在文档的主体中使用样式可能导致重新设置,触发布局和/或导致重新绘制,因此应该小心使用。

    HTML头部声明

    以下严格的文件类型不在使用:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    



    参考:
    https://bitsofco.de/whats-new-in-html-5-2/?utm_source=tuicool&utm_medium=referral
    http://www.infoq.com/cn/news/2018/01/html-5-2-recommendation
    https://juejin.im/post/5a54cc75518825734107cd73?utm_source=tuicool&utm_medium=referral

    相关文章

      网友评论

        本文标题:W3C官方发布HTML5.2新特性

        本文链接:https://www.haomeiwen.com/subject/zfoznxtx.html