html - 使用仅显示在 "small devices"上的隐藏元素是否被认为是不好的做法？

Question

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

这里是:

 <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 元素“display: block;”一个接一个地展示给他们看。

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

<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 元素是否被认为是一种不好的做法？或者也许还有其他更好的解决方案？

Answer 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 添加仅适用于移动设备的额外标签文本。