说说HTML中alternate的一二三事

alternate？你没搞错吧？这不就是“交替、替换”吗？这有什么好说的？

但是如果我问出来：alternate在HTML中的用法，具体作用，可能你只能说：“诶这不是那啥么”。

说实话我一开始也压根不知道有这个东西，但是就在前两天这玩意解决了我的一大“难题”，顿时这兴趣不就来了么！
heihei

好吧想来你也遇到过这种情况：网页换肤！
其实我们的选择还是挺多的，比如：

设置不同颜色，用JavaScript去一个一个的操控、替换（或者设置“全局的”class名）
用JavaScript替换link标签的href值

对啊，这两个怎么看都感觉非常好啊 —— 那是你不知道：

全局class控制样式提高了~~样式优先级~~ ，如果换肤样式很多，代码将“冗余”，不利于维护（JS代码将阻塞页面渲染、造成页面回流/重绘）
使用JS改变href属性会带来~~加载延迟~~ ，样式切换不流畅，体验不佳（亲测：如果切换样式过多且稍加频繁则可能页面卡死）

但是link标签的rel中支持值“alternate” ，事情瞬间就不一样了。我们先来看下关于此属性的写法：

<link href="index.css" rel="stylesheet" type="text/css">

没有title属性，rel属性值仅仅是stylesheet的<link> —— 无论如何都会加载并渲染；

<link href="default.css" rel="stylesheet" type="text/css" title="默认">

有title属性，但rel属性值仍仅仅是stylesheet的<link> —— 作为默认样式CSS文件加载并渲染；

<link href="gray.css" rel="alternate stylesheet" type="text/css" title="灰色">

有title属性，rel属性值同时包含alternate stylesheet的<link> —— 作为备选样式CSS文件加载，默认不渲染；

这里有个非常有趣的特性，那就是 rel=“stylesheet” 的 link标签如果有 title属性并有值，性质上就变成了一个可以控制其渲染或者不渲染的特殊元素了。—— 张鑫旭

渲染不渲染？这不就相当于display了？
如此，使用JavaScript代码修改<link>元素DOM对象的disabled值为false，可以让默认不渲染（rel含有alternate）的外链CSS开始渲染。注意，必须是DOM元素对象的disabled属性，而不是HTML元素的disabled属性， link 元素是没有disabled属性的 。就像这样：

document.querySelector('link[href="gray.css"]').disabled = false;

“DOM的”和“HTML的”两者有本质区别：HTML元素的属性通常是指其CSS样式，即xxx.style.xxx ；而DOM对象的属性通常是“挂载到对象原型上的属性”（函数才有“原型链”）

我们可以用input的radio标签来控制「切换」：

//head中部分内容：
<link href="default.css" rel="stylesheet" type="text/css" title="默认">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="红色">
<link href="green.css" rel="alternate stylesheet" type="text/css" title="绿色">
//HTML代码：
<p>
    选择样式：
    <input id="default" type="radio" name="skin" value="default.css" checked><label for="default">默认</label>
    <input id="red" type="radio" name="skin" value="red.css"><label for="red">红色</label>
    <input id="green" type="radio" name="skin" value="green.css"><label for="green">绿色</label>
</p>
//JS代码：
var eleLinks = document.querySelectorAll('link[title]');
var eleRadios = document.querySelectorAll('input[type="radio"]');
[].slice.call(eleRadios).forEach(function (radio) {
    radio.addEventListener('click', function () {
        var value = this.value;
        [].slice.call(eleLinks).forEach(function (link) {
            link.disabled = true;
            if (link.getAttribute('href') == value) {
                link.disabled = false;
            }
        });
    });
});

受此影响，我顺便用这个属性做了 RSS订阅功能 ，非常流畅！

你以为就这？
比如：如果网页有对应的移动版变体，就要为其添加 rel=“alternate” ，并使其【指向】此网页的移动版：

<link rel="alternate" media="only screen and (max-width: 640px)" href="xxx" >

这对于网站的性能提升是巨大的！

a标签在HTML5也增加了alternate，但是似乎并没啥大用。。。至少现在看来是这样。期待后续发展

使用alternate的优势：

兼容性非常好
语义非常好。用户，开发者，尤其搜索引擎或者其他辅助阅读设备能够准确识别网站还有其他替换CSS样式。（alternate的语义就是“可替换的”）
交互体验更好。rel=alternate方法实现的换肤功能在网站样式变换的时候是瞬间切换，完全无感知。因为浏览器已经把换肤的CSS文件预加载好了，比JS改变href地址的体验要更好。

说说HTML中alternate的一二三事

猜你喜欢