炫意html5
最早CSS3和HTML5移动技术网站之一

你必须知道的28个HTML5特征、窍门和技术(3)

二十一、属性支持检测

如果我们没有方法检测浏览器是否支持这些属性,这些就不能称之为好的属性。恩,不错的观点,事实上我们是有几种方法的,这里我们讨论2个。第一个是利用优秀的Modernizr库,或者,我们可以创建和分析这些元素,以确定浏览器的能力。例如,在我们前面的例子,如果我们要确定浏览器是否能使用pattern的属性,我们可以添加一小段JavaScript到我们的页面上:

alert( 'pattern' in document.createElement('input') ); // boolean  

 

事实上,这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面,我们创建了一个新的input元素,并确定了里面的pattern属性浏览器是否认得。如果是,浏览器则支持此功能。否则,当然就不支持了。

<script>
if (!'pattern' in document.createElement('input') ) {
    // do client/server side validation
}
</script>

谨记此方法依赖于JavaScript。

二十二、mark元素(Mark Element )

试想<mark>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如,我在一些博客上搜索“北川景子”,我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。

<h3> 搜索结果 </h3>
<p> 
          我很喜欢《零秒出手》里面那个拉小提琴的女孩,原来她叫做 <mark>北川景子</mark>。
</p>

二十三、什么时候使用div

我们有些人开始质问到底何时该使用div。现在我们可以使用header, article, section, 和footer,还有机会使用div…吗?当然可以。

div应该用在没有更好的元素的时候。

 

例如,如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章,或者,可能是,底部的链接列表,则需考虑分别使用<article>和<nav>元素,因为其更具语义。

二十四、什么可以开始立即使用

一直谈论到现在的HTML5要到2022年才能全部完成,许多人完全忽视它,这是个巨大的错误。事实上,有少量的HTML5的功能,我们可以在我们所有的项目中使用!更简单,更干净的代码总是一件好事。在今天的视频快速展示的技巧中,我将告诉你一些可用的选项。

//zxx:YouTuBe视频,需要翻墙。

二十五、哪些不是HTML5(What is Not HTML5)

那些仅凭自己的假设形象将JavaScript变少的过渡被全部归为HTML5的人是可以理解的,嘿,甚至苹果无意中推动这一想法。对于非开发人员,谁管这个呢,它是一个简单的方法适用于现代网页标准。不过,对于我们来说,尽管它可能只是语义,重要的是要准确理解什么不是HTML5。

  1. SVG:不是HTML5,至少5岁了。
  2. CSS3:不是HTML5,它是…CSS。
  3. Geolocation:不是HTML5.//zxx:Geolocation(地理位置):通过HTML 5,您应该能够使Web应用程序可确定您的位置,并为您提供更多的相关信息。
  4. Client Storage(客户端存储):非HTML5,虽说有一点切合,但被排除在规范之外,原因在于,担忧其作为一个整体,会变得过于复杂。它现在有自己的规范。
  5. Web Sockets:不是HTML5,同样的,有着自己的一套准则。

不管你需求有多大的区别,所有这些技术可以归为现代网络堆栈。事实上,不少这些分支规范的管理着还是同一人。

二十六、data属性(The Data Attribute)

我们现在可以很正式地让所有的HTML元素支持自定义属性。然而,以前,我们可能会这样:

<h1 id=someId customAttribute=value> 小样,胆儿挺肥的呢 </h1>

 

…校验器会小题大做!但是现在,只要我们以”data”为前缀定义我们的自定义属性,盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上,可能为了JavaScript之用,那么,本属性将大有帮助啊。

HTML片段

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉,lady 嘎嘎 </div>

 

检索自定义属性的价值

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value

此属性还可以用在CSS中,例如下面这个有些傻里傻气的CSS文字改变的例子:

CSS代码:
.data_custom { display:inline-block; position: relative; }
.data_custom:hover { color: transparent; }
.data_custom:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
}
HTML代码:
<a class="data_custom" data-hover-response="我说过不要碰我!" href="#">不要碰我,雅蠛蝶~~</a>

如果你的浏览器支持after伪类,以及content的attr属性,则可以看到类似下面的效果(IE8不一样):

CSS与HTML5自定义属性 张鑫旭-鑫空间-鑫生活

还有,content属性其实是一个非常强大的属性,由于低版本的IE不支持,所以此属性尚未流行,关于content内容生成技术。

二十七、Output元素

正如你可能预料到的,output元素被用来显示部分计算,例如,如果你想显示一个鼠标的位置,或者是一系列数字的总和坐标,这个数据应被插入到output元素中。

举个简单的例子,当提交按钮被按下,我们用JavaScript将两个数字相加值插入到空的output中。

<form action="" method="get">
    <p>
        10 + 5 = <output name="sum"></output>
    </p>
    <button type="submit">计算</button>
</form>

(function() {
    var f = document.forms[0];

    if ( typeof f['sum'] !== 'undefined' ) {
        f.addEventListener('submit', function(e) {
            f['sum'].value = 15;
            e.preventDefault();
        }, false);
    } else {
        alert('你的浏览器尚未准备好!');
    }
})();

自己测试了下,貌似现在只有在Opera浏览器下有上佳的效果:

HTML5结果输出框 张鑫旭-鑫空间-鑫生活

此元素也可以接受一个属性,它反映了输出相关元素的名称,类似label工作原理。

二十八、使用区域input创建滑块(Create Sliders with the Range Input)

HTML5引进了range类型的input。

<input type="range">

最值得注意的是,它可以接收 min, max, step, 和value 属性,等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型,但是当我们可以实际使用时,这将是美妙无比的!

参见下面的快速演示:

第一步:标签

首先,创建标签

<form method="post">
    <h4>音量控制</h4>
    <input type="range" name="range" min="0" max="10" step="1" value="" />
    <output name="result">  </output>
</form>
第二步:CSS
下面,我们要使用一点点的样式。我们将使用:before和:after去告知用户我们制定的最大值和最小值。

nput { font-size: 14px; font-weight: bold;  }

input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}

output {
    display: block;
    font-size: 5.5em;
    font-weight: bold;
}
第三步:JavaScript
最后,我们
  • 检测我们的浏览器是否认识range input,如果不,显示提示。
  • 当用户移动滑块的时候,动态改变output的值。
  • 监听,当用户离开滑块,插入值,同时本地存储。
  • 然后,下次用户刷新页面的时候,选择的区域和值会自动地设置成他们最后一次选择。
  • (function() {
        var f = document.forms[0],
            range = f['range'],
            result = f['result'],
            cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 
    
        // 检测浏览器是否是足够酷
        // 识别range input.
        var o = document.createElement('input');
        o.type = 'range';
        if ( o.type === 'text' ) alert('不好意思,你的浏览器还不够酷,试试最新的Opera浏览器吧。');
    
        // 设置初始值
        // 无论是否本地存储了,都设置值为5
        range.value = cachedRangeValue;
        result.value = cachedRangeValue;
    
        // 当用户选择了个值,更新本地存储
        range.addEventListener("mouseup", function() {
            alert("你选择的值是:" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");
            localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");
        }, false);
    
        // 滑动时显示选择的值
        range.addEventListener("change", function() {
            result.value = range.value;
        }, false);
    
    })();

我的电脑是xp系统,默认主题,在滑块松开后Opera下的效果如下图所示,酷吧:

HTML5 range input炫酷效果 张鑫旭-鑫空间-鑫生活

感谢您的阅读!我们已经讨论了很多,但可能只是触及到HTML5的皮毛,全当抛砖引玉,希望能对您的学习有所帮助!

//zxx:以上是翻译/编辑的全部内容,内容已经够多了,我就不多说什么了。

你必须知道的28个HTML5特征、窍门和技术(1)
你必须知道的28个HTML5特征、窍门和技术(2)
你必须知道的28个HTML5特征、窍门和技术(3)

原文地址:http://net…html5-features-tips-and-techniques…/
文章来源:张鑫旭·http://www.zhangxinxu.com/wordpress/?p=1058

炫意HTML5 » 你必须知道的28个HTML5特征、窍门和技术(3)

CSS3教程HTML5教程