Question

我有预订表格。我希望它能够响应不同的设备。在大型桌面上，有足够的空间，所以我想显示一个日期和时间：

2017年9月15日星期六下午1:30

在平板电脑上，空间较小，因此需要显示为：

2017年9月15日星期六下午1:30

在移动设备上，空间更小，所以我只想展示：

15/09/17 @ 1:30 pm

通过隐藏和显示媒体查询的一些元素很容易实现。每个用户都会获得最适合其设备的格式。

我担心的是，显然，相同的信息现在在标记中3次，有3种不同的格式。有没有办法告诉浏览器/搜索引擎/屏幕阅读器等这是重复的标记，并且可以忽略重复项？

Answer 1

不幸的是，由于HTML不支持使用媒体查询即时交换内容，因此我认为没有办法在标记内实现这一目标。

使用CSS实现此目的的一种方法是将生成的内容与自定义数据属性结合使用以交换日期格式：

＆＃13;

@media (max-width: 1000px) {
  time[data-mediumtime][data-shorttime] {
    font-size: 0;
  }
  time[data-mediumtime][data-shorttime]::before {
    content: attr(data-mediumtime);
    font-size: medium;
  }
}

@media (max-width: 500px) {
  time[data-mediumtime][data-shorttime]::before {
    content: attr(data-shorttime);
  }
}

＆＃13;

<time datetime="2017-09-15 13:30"
      data-mediumtime="Fri 15th Sep 2017 @ 1:30pm"
      data-shorttime="15/09/17 @ 1:30pm">Friday 15th September 2017 @ 1:30pm</time>

＆＃13;

我建议自定义数据属性的原因是，如果unor并且我正确阅读了规范，爬虫和AT应该忽略自定义数据属性，这意味着他们应该只看到两件事：文本内容（即长日期格式），以及机器可读的datetime属性（这是他们应该开始时感兴趣的）。这是living spec：

中的相关文字

自定义数据属性旨在存储页面或应用程序专用的自定义数据，状态，注释等，没有更合适的属性或元素。

这些属性不适用于使用该属性的站点管理员不知道的软件。对于要由多个独立工具使用的通用扩展，应扩展此规范以明确提供该功能，或者应使用微数据等技术（使用标准化词汇表）。

使用生成内容的唯一缺点是生成的内容无法突出显示和复制，但这可能不会成为平板电脑和移动设备的问题，而在窗口桌面环境中，所有主要内容仍然可能浏览器复制实际内容而不管实际显示的是什么 - 它只是在被隐藏时才会被突出显示。

您也可以使用带有监听器的window.matchMedia()直接使用JavaScript来操作内容，但除了要求启用脚本之外，我认为仅仅交换日期格式（这对于这个问题主要是装饰性的，因此无论如何都在CSS的范围内）同时避免重复的内容。

多种不同格式的相同信息，但只考虑一次

1 个答案: