使用仅在“小型设备”上显示的隐藏元素是不是被认为是不好的做法？

Posted 2023-03-05

【中文标题】使用仅在“小型设备”上显示的隐藏元素是不是被认为是不好的做法？

【英文标题】：Is it considered bad practice to use hidden elements which are displayed on "small devices" only?使用仅在“小型设备”上显示的隐藏元素是否被认为是不好的做法？

【发布时间】：2016-03-17 11:02:00

【问题描述】：

我正在使用表格来显示有关在系统中注册的用户的信息。我想让这张表在小型（移动）设备上显示时更加“用户友好”。

这里是：

 <table>
    <thead>
    <tr>
        <td>User ID</td>
        <td>Role</td>
        <td>Group</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Dummy User ID 1</td>
        <td>Dummy User Role 1</td>
        <td>Dummy User Group 1</td>
    </tr>
    <tr>
        <td>Dummy User ID 2</td>
        <td>Dummy User Role 2</td>
        <td>Dummy User Group 2</td>
    </tr>
    ...
    </tbody>
</table>

我正在使用媒体查询来更改表格在小型设备上的外观。

首先，我隐藏了广告。

其次，我将应用于 td 元素“显示：块；”让他们一个接一个地展示。

第三，我决定在用户​​ ID/角色/组值旁边显示列名：

<table>
    <thead>
    <tr>
        <td>User ID</td>
        <td>Role</td>
        <td>Group</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <span>User ID:</span> Dummy User ID 1
        </td>
        <td>
            <span>User Role:</span> Dummy User Role 1
        </td>
        <td>
            <span>User Group:</span> Dummy User Group 1
        </td>
    </tr>
    <tr>
        <td>
            <span>User ID:</span> Dummy User ID 2
        </td>
        <td>
            <span>User Role:</span> Dummy User Role 2
        </td>
        <td>
            <span>User Group:</span> Dummy User Group 2
        </td>
    </tr>
    ...
    </tbody>
</table>

所以这些 span 元素只在小型设备上显示。在中型/大型设备上“显示：无；”应用于它们，但它们仍然存在于 html 标记中。拥有像这样的不可见的 HTML 元素是否被认为是一种不好的做法？或者也许还有其他更好的解决方案？

【问题讨论】：

如果您的代码有效，但您正试图让某人对其进行审查以进行改进，请在CodeReview 发帖。

这是一个与代码本身无关的问题。但是关于这段代码sn-p中使用的“实践”。该代码仅作为示例提供，以使我的问题更清楚。如有必要，我可以将其删除。

所以你想要有人推荐这是否是最佳实践？

是的。我想知道使用仅针对某些类型的设备显示的隐藏元素是否是一种不好的做法。如果它是通常使用的方法。

老实说，我无法理解为什么这个问题与 CodeReview 有关，因为它与特定的代码和平无关。我提供了代码示例只是为了让我的问题更清楚。但是，该示例可以替换为任何其他示例或完全从问题中删除，并且实际上不需要任何类型的审查。我可以假设我错了，并想知道我是否错了，但我认为这里不是讨论的最佳地点。

【参考方案1】：

我认为这不一定是一种糟糕的做法，但如果将这些 DOM 元素隐藏在屏幕显示中会让你变形，我有一个替代解决方案。既然 span 的内容是一致的，为什么不将它们作为 'before' 伪元素添加到小设备 CSS 中呢？

类似：

td:nth-child(1)::before  content: "User ID: "; 
td:nth-child(2)::before  content: "User Role: "; 
td:nth-child(3)::before  content: "User Group: "; 

这样，您可以让屏幕显示的 DOM 保持整洁，并根据需要通过 CSS 添加仅用于移动设备的额外标签文本。