如何避免出现“未样式化内容闪烁"?在CSS表格中使用固定宽度的单元格? [英] How can I avoid a "Flash of Unstyled Content" using fixed-width cells in CSS Tables?

问题描述

我的Web GUI的布局部分由CSS表驱动.这主要是因为我想要单元格"在所有情况下都具有相同的高度，而不会因对准而产生任何麻烦.总体而言，这种方法非常成功.

但是，我确实遇到了一个问题，即表格中的右侧单元有时会花一点时间来渲染，从而导致左侧单元短暂地具有100％的页面宽度.这会引起明显的闪烁"效果，尽管效果不明显，但还是很烦人的.而且我已经决定要修复它.

以下是我的页面工作方式的模糊表示:

 #tbl      { display: table; width: 200px; border: 1px solid black; }
#tbl-row  { display: table-row; }
#tbl-col1,
#tbl-col2 { display: table-cell; }

#tbl-col1 { width: 50px; background-color: red; }
#tbl-col2 { background-color: blue; } 

 <div id="tbl">
    <div id="tbl-row">
        <div id="tbl-col1">LHS</div>
        <div id="tbl-col2">RHS</div>
    </div>
</div> 

一切顺利，直到您使用开发人员工具为#tbl-col2提供display: none指令，[我希望准确地]模拟在渲染#tbl-col1和#tbl-col2正在呈现.

请注意，尽管我已指定#tbl-col1的宽度，但它立即会占用表的宽度的100％.我有点理解为什么会这样:毕竟，我已经让浏览器问来使div的行为像表一样.尽管如此，这还是不可取的.

我试图通过插入空格"来解决此问题，希望没有width它将扩展为填充右侧的所有空间，直到渲染右侧为止:

 #tbl      { display: table; width: 200px; border: 1px solid black; }
#tbl-row  { display: table-row; }
#tbl-col1,
#tbl-spc,
#tbl-col2 { display: table-cell; }

#tbl-col1 { width: 50px;  background-color: red; }
#tbl-col2 { width: 150px; background-color: blue; } 

 <div id="tbl">
    <div id="tbl-row">
        <div id="tbl-col1">LHS</div>
        <div id="tbl-spc"></div>
        <div id="tbl-col2">RHS</div>
    </div>
</div> 

正如您再次隐藏#tbl-col2所看到的，它并没有造成任何盲目的区别:#tbl-col1仍然占据了表格的整个宽度，而不是我允许的50px.

假设我宁愿解决此问题，也不愿完全放弃CSS Tables布局，该怎么办?

还是我必须替换布局，或者更糟的是采用JavaScript方法解决FoUC?

解决方案

在类似情况下(例如html电子邮件)，我喜欢使用空单元格预先定义列宽:

 .tbl {
    display: table;
    width: 200px;
    border: 1px solid black;
    color: #fff;
}
.tbl-row {
    display: table-row;
}
.tbl-cell {
    display: table-cell;
}
.tbl-col1 {
    width: 50px;
    background-color: red;
}
.tbl-col2 {
    background-color: blue;
} 

 <h3>Pre-define columns width by adding additional row</h3>

<div class="tbl">
    <div class="tbl-row tbl-format">
        <div class="tbl-cell tbl-col1"></div>
        <div class="tbl-cell tbl-col2"></div>
    </div>
    <div class="tbl-row">
        <div class="tbl-cell tbl-col1">LHS</div>
        <div class="tbl-cell tbl-col2">RHS</div>
    </div>
</div> 

如果单元格中没有任何内容，则该格式设置列将不可见，但仍会告诉浏览器表的格式设置方式.

My web GUI's layout is partially driven by CSS tables. This is mainly because I want the "cells" to have the same height under all situations without any massive headaches surrounding alignment. Overall, this approach has been very successful.

However, I do have a problem whereby the right-hand cell in the table can sometimes take a moment to render, causing the left-hand cell to briefly have 100% of the page width. This causes a noticeable "flicker" effect which, although minor, is kind of annoying. And I've decided to fix it.

Here is a vague representation of how my page works:

#tbl      { display: table; width: 200px; border: 1px solid black; }
#tbl-row  { display: table-row; }
#tbl-col1,
#tbl-col2 { display: table-cell; }

#tbl-col1 { width: 50px; background-color: red; }
#tbl-col2 { background-color: blue; }

<div id="tbl">
    <div id="tbl-row">
        <div id="tbl-col1">LHS</div>
        <div id="tbl-col2">RHS</div>
    </div>
</div>

All's well and good until you use your developer tools to give #tbl-col2 a display: none directive, [I hope accurately] simulating the state of the browser's rendering engine in the moments between #tbl-col1 having been rendered, and #tbl-col2 being rendered.

Notice that #tbl-col1 immediately takes up 100% of the width of the table, despite the width I've given it. I sort of understand why this is happening: after all, I've asked the browser to make the divs behave like tables. Still, it's undesirable here.

I tried to fix this by inserting a "spacer", hoping that without a width it would expand to fill all the space on the right-hand side until such time as the right-hand side got rendered:

#tbl      { display: table; width: 200px; border: 1px solid black; }
#tbl-row  { display: table-row; }
#tbl-col1,
#tbl-spc,
#tbl-col2 { display: table-cell; }

#tbl-col1 { width: 50px;  background-color: red; }
#tbl-col2 { width: 150px; background-color: blue; }

<div id="tbl">
    <div id="tbl-row">
        <div id="tbl-col1">LHS</div>
        <div id="tbl-spc"></div>
        <div id="tbl-col2">RHS</div>
    </div>
</div>

As you can see by again hiding #tbl-col2, it made not a blind bit of difference: #tbl-col1 still took the whole width of the table, rather than the 50px I allowed it.

Assuming I'd rather fix this than abandon the CSS Tables layout altogether, what can I do?

Or am I going to have to replace the layout or, even worse, take a JavaScript approach to resolving the FoUC?

解决方案

What I like to do in similar cases (for example html emails) is to pre-define column widths using empty cells this way:

.tbl {
    display: table;
    width: 200px;
    border: 1px solid black;
    color: #fff;
}
.tbl-row {
    display: table-row;
}
.tbl-cell {
    display: table-cell;
}
.tbl-col1 {
    width: 50px;
    background-color: red;
}
.tbl-col2 {
    background-color: blue;
}

<h3>Pre-define columns width by adding additional row</h3>

<div class="tbl">
    <div class="tbl-row tbl-format">
        <div class="tbl-cell tbl-col1"></div>
        <div class="tbl-cell tbl-col2"></div>
    </div>
    <div class="tbl-row">
        <div class="tbl-cell tbl-col1">LHS</div>
        <div class="tbl-cell tbl-col2">RHS</div>
    </div>
</div>

That formatting column is invisible if there is no content inside cells, but still it tells browser the way table should be formatted.

这篇关于如何避免出现“未样式化内容闪烁"?在CSS表格中使用固定宽度的单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！