我正在使用快捷方式链接来加速通过网页的标签,这在Chrome和Firefox中运行良好.
这是小提琴演示我的问题.
当使用"跳过"链接更改"标签位置",然后TAB按键时,大多数浏览器会继续按顺序跳转到可聚焦的交互式或使用tabindex的元素:
<div class="skiplinks">
<a href="#nav">Skip to Navigation</a>
<a href="#search">Skip to Search</a>
<a href="#anchor">Skip to anchor</a>
</div>
<div id="wrapper">
<p>Some boring content containing <a href="#">a selectable link</a>.</p>
<ul id="nav">
<li><a href="#">link 1</li>
<li><a href="#">link 2</li>
<li><a id="anchor">anchor with no href</li>
</ul>
<form id="search">
<input type="search" id="search-field" />
</form>
</div>
在此示例中,单击链接时,"标签位置"将移动到文档中的该位置.TAB然后按下将跳过跳过链接目标后的下一个可聚焦元素- 尝试此演示.
除非你使用的是IE.如果IE关注于交互元素或具有tabindex定义属性的元素,IE似乎只会尊重"标签位置"的变化.这意味着锚标签被用作"片段"或位置锚,也不会导致tabinx被更新.
在上面的示例中,选择跳过链接然后点击TAB只是跳回到页面上的第一个链接.选择"跳过锚定"然后"选项卡"也会跳回到顶部.这个怪癖似乎影响IE 8-11.
好的,那么为什么不直接将跳转链接指向交互元素而不是包装器呢？我试过了,巧合地解决了IE中的错误,并在Firefox中引入了它.如果我优先考虑IE而不是FF,我会被诅咒.
我只是缺少一些非常明显的东西吗？
UPDATE
我已经解决了这个问题,解决方案是只创建片段/跳过链接,指向分配<a>了负值的标签tabindex:
<a href="#destination">Skip …
我一直在寻找一种轻量，灵活，跨浏览器的解决方案，以在JavaScript中访问CSS媒体查询，而不会在JavaScript代码中重复CSS断点。
CSS技巧发布了一个基于CSS3动画的解决方案，该解决方案似乎很有帮助，但是建议改用Enquire.js。
Enquire.js似乎仍然需要在脚本中对Media Query大小进行硬编码，例如
enquire.register("screen and (max-width:45em)", { // do stuff }
问题
到目前为止，所有用于访问Java媒体查询的解决方案似乎都依赖于在脚本中硬编码的断点。如何以允许仅在CSS中定义断点而不依赖的方式访问断点.on('resize')？
尝试的解决方案
我已经制作了自己的版本，可以在IE9 +中使用，使用了一个隐藏元素，该元素使用该:content属性添加查询触发时想要的任何内容（与ZeroSixThree解决方案相同的起点）：
的HTML
<body>
<p>Page content</p>
<span id="mobile-test"></span>
</body>
的CSS
#mobile-test {
display:none;
content: 'mq-small';
}
@media screen only and (min-width: 25em) {
#mobile-test {
content: 'mq-medium';
}
}
@media screen only and (min-width: 40em) {
#mobile-test {
content: 'mq-large';
}
}
使用jQuery的JavaScript
// Allow resizing to be assessed …