如何解决添加 flex 后 css 的某些部分稍后渲染
我正在开发一个博客,我最近添加了一个带有 div
的 display: flex;
元素,以使这些元素显示在同一行中。
但是,每当我加载页面时进行此更改后,元素都会向右移动一点,并且字体加载有点晚。这种情况只会发生一段时间,页面加载后,它们都会移回预期位置。
注意:这不会出现在我的本地主机上,而只会出现在生产版本中(或部署时)
请观看下面的视频以亲自观看:
或者如果在桌面上亲自见证:https://lucid-brown-a29dc1.netlify.app/
JSX
<li>
<Link to={slug} key={slug} className="link">
<h1 className="title">
{title}
</h1>
<p className="Meta">
<span>
<FaCalendar size={18} /> {prefix}
</span>
<div className="tags">
{tags && tags.map(tag =>
<Link to={`/tag/${tag.split(" ").join("-").toLowerCase()}`}>
<span key={tag}> <FaTag size={18} /> {tag} </span>
</Link>
)}
</div>
</p>
<p> {excerpt}</p>
</Link>
</li>
对应的css:
<style jsx>{`
:global(.link) {
width: 100%;
color: ${theme.text.color.primary};
}
li {
border: 1px solid transparent;
// border-radius: ${theme.size.radius.default};
margin: ${theme.space.l} 0 ${`calc(${theme.space.l} * 3)`};
padding: ${theme.space.inset.s};
position: relative;
transition: all ${theme.time.duration.default};
background: transparent;
&::after {
// border-top: 1px solid ${theme.line.color};
content: "";
height: 0;
position: absolute;
bottom: ${`calc(${theme.space.default} * -1.5)`};
left: 50%;
transform: translateX(-50%);
transition: all ${theme.time.duration.default};
width: 50%;
}
&:first-child {
margin-top: 10px;
}
&:last-child {
margin-bottom: 10px;
}
}
.title {
padding: ${theme.space.m} ${theme.space.s} 0;
line-height: ${theme.blog.h1.lineHeight};
font-size: ${theme.blog.h1.size};
text-remove-gap: both;
:global(.arrow) {
display: none;
position: relative;
top: 7px;
}
}
.Meta {
// display: block;
font-size: 0.8em;
padding: ${theme.space.s} ${theme.space.s};
margin: ${theme.space.m} 0;
background: transparent;
.tags {
display: flex;
flex-flow: row wrap;
// flex-shrink: 0;
}
:global(svg) {
// fill: ${theme.icon.color};
fill: ${theme.text.color.primary};
opacity: 0.5;
margin: ${theme.space.inline.xs};
position: relative;
bottom: -0.4em;
}
span {
// align-items: baseline;
// display: flex;
text-transform: uppercase;
margin: ${theme.space.xs} ${theme.space.s} ${theme.space.xs} 0;
font-size: 0.8em;
}
}
p {
line-height: 1.5;
padding: 0 ${theme.space.s};
text-remove-gap: both;
}
@from-width tablet {
li {
margin: ${`calc(${theme.space.default} * 3)`} 0 ${theme.space.xl};
padding: ${theme.space.default};
&::after {
bottom: ${`calc(${theme.space.default} * -2)`};
}
&:first-child {
&::before {
top: ${`calc(${theme.space.default} * -1.75)`};
}
}
}
.title {
font-size: ${`calc(${theme.blog.h1.size} * 1.2)`};
padding: ${`calc(${theme.space.default} * 1.5) ${theme.space.default} 0`};
transition: all 0.5s;
}
.Meta {
padding: ${theme.space.default} ${theme.space.default};
}
p {
padding: 0 ${theme.space.default};
}
}
@below desktop {
li {
border: 1px solid ${theme.line.color};
Box-shadow: 0px 3px 2px rgba(0,0.03);
margin-top: 20px;
margin-bottom: 20px;
&:first-child {
margin-top: 0;
}
&::after {
border-top: 0px;
}
}
}
@from-width desktop {
li {
margin: 0 0 0;
padding: 0 0 ${theme.space.l};
&::after {
bottom: ${`calc(${theme.space.default} * -1.5)`};
}
&:first-child {
&::before {
top: ${`calc(${theme.space.default} * -2.75)`};
}
}
}
:global(.blogItemLink:first-child) > li::before {
top: ${`calc(${theme.space.default} * -2.75)`};
}
.title {
font-size: 2.5em;
padding: ${`calc(${theme.space.default} * 1.2)`} ${theme.space.l} 0;
}
.Meta {
padding: 0 ${theme.space.l} 0;
}
p {
padding: 0 ${theme.space.l} 0;
}
li {
&:hover {
border: 1px solid ${theme.line.color};
Box-shadow: 0px 3px 2px rgba(0,0.03);
&:after {
bottom: ${`calc(${theme.space.default} * -2.5)`};
}
:global(.gatsby-image-wrapper) {
transform: scale(1.1);
}
.title {
color: ${theme.blog.h1.hoverColor};
}
}
}
}
@media (hover: hover) {
.Meta {
:global(a svg) {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
}
:global(a:hover svg) {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transform: scale(1.3);
color: ${theme.color.brand.primary};
}
}
}
`}</style>
到目前为止我已经尝试过:
- 将
div
更改为span
但这会使标签与上面的前缀对齐 - 删除
flex
但我还可以如何将项目对齐? - 试图通过删除复杂的计算来提高 css 性能
- 读到应该使用
grid
而不是flex
但看起来grid
不可用(可能需要使用一些 css 框架?) - 我还观察到字体颜色比页面加载稍晚,所以这可能与
flex
完全无关,我只是在吠错树?
我是 css 新手,所以我可能没有在这里使用最佳实践。在这里粘贴整个 css,因为我无法找到问题的原因。是因为 flex Box 性能很重吗?我该如何缓解这种情况?
如果有人想阅读整个代码:https://github.com/amita-shukla/blog-1/blob/master/src/components/Blog/Teaser.js
解决方法
FOUC(Flash OF Unstyled C 组件)来自多个来源。在您的情况下,我猜将 CSS 加载为 JSX 组件 <style jsx>
会阻止样式的呈现,直到它们被浏览器解析为止。请记住 JavaScript is a render-blocking。此外,您的代码的最终行为应在 gatsby build
环境中进行测试。
在浏览器可以呈现页面之前,它必须通过解析 HTML 标记来构建 DOM 树。在此过程中,每当解析器遇到脚本时,它必须停止并执行它,然后才能继续解析 HTML。
尝试将样式添加为 Gatsby docs suggest:
- Global CSS Files:设计网站样式的传统方式。 CSS 规则是全局声明的,样式的应用取决于特定性和继承性。
- Modular Stylesheets:CSS 规则以传统方式编写,但与 JavaScript 一起使用并在本地限定范围,以避免在其他地方产生意外的副作用。与 Gatsby 一起开箱即用。
- CSS-in-JS:用 JavaScript 编写和使用的本地范围的 CSS,可以更轻松地使用动态样式和其他功能。需要使用第三方库。
作为初始方法,我建议使用 CSS 文件:
import './styles.css'
// other imports
<li>
<Link to={slug} key={slug} className="link">
<h1 className="title">
{title}
</h1>
<p className="meta">
<span>
<FaCalendar size={18} /> {prefix}
</span>
<div className="tags">
{tags && tags.map(tag =>
<Link to={`/tag/${tag.split(" ").join("-").toLowerCase()}`}>
<span key={tag}> <FaTag size={18} /> {tag} </span>
</Link>
)}
</div>
</p>
<p> {excerpt}</p>
</Link>
</li>
假设styles.css 与您的React 组件在同一个文件夹中。在那里,在您的 styles.css
中:
:global(.link) {
width: 100%;
color: ${theme.text.color.primary};
}
li {
border: 1px solid transparent;
// border-radius: ${theme.size.radius.default};
margin: ${theme.space.l} 0 ${`calc(${theme.space.l} * 3)`};
padding: ${theme.space.inset.s};
position: relative;
transition: all ${theme.time.duration.default};
background: transparent;
&::after {
// border-top: 1px solid ${theme.line.color};
content: "";
height: 0;
position: absolute;
bottom: ${`calc(${theme.space.default} * -1.5)`};
left: 50%;
transform: translateX(-50%);
transition: all ${theme.time.duration.default};
width: 50%;
}
&:first-child {
margin-top: 10px;
}
&:last-child {
margin-bottom: 10px;
}
}
.title {
padding: ${theme.space.m} ${theme.space.s} 0;
line-height: ${theme.blog.h1.lineHeight};
font-size: ${theme.blog.h1.size};
text-remove-gap: both;
:global(.arrow) {
display: none;
position: relative;
top: 7px;
}
}
.meta {
// display: block;
font-size: 0.8em;
padding: ${theme.space.s} ${theme.space.s};
margin: ${theme.space.m} 0;
background: transparent;
.tags {
display: flex;
flex-flow: row wrap;
// flex-shrink: 0;
}
:global(svg) {
// fill: ${theme.icon.color};
fill: ${theme.text.color.primary};
opacity: 0.5;
margin: ${theme.space.inline.xs};
position: relative;
bottom: -0.4em;
}
span {
// align-items: baseline;
// display: flex;
text-transform: uppercase;
margin: ${theme.space.xs} ${theme.space.s} ${theme.space.xs} 0;
font-size: 0.8em;
}
}
p {
line-height: 1.5;
padding: 0 ${theme.space.s};
text-remove-gap: both;
}
@from-width tablet {
li {
margin: ${`calc(${theme.space.default} * 3)`} 0 ${theme.space.xl};
padding: ${theme.space.default};
&::after {
bottom: ${`calc(${theme.space.default} * -2)`};
}
&:first-child {
&::before {
top: ${`calc(${theme.space.default} * -1.75)`};
}
}
}
.title {
font-size: ${`calc(${theme.blog.h1.size} * 1.2)`};
padding: ${`calc(${theme.space.default} * 1.5) ${theme.space.default} 0`};
transition: all 0.5s;
}
.meta {
padding: ${theme.space.default} ${theme.space.default};
}
p {
padding: 0 ${theme.space.default};
}
}
@below desktop {
li {
border: 1px solid ${theme.line.color};
box-shadow: 0px 3px 2px rgba(0,0.03);
margin-top: 20px;
margin-bottom: 20px;
&:first-child {
margin-top: 0;
}
&::after {
border-top: 0px;
}
}
}
@from-width desktop {
li {
margin: 0 0 0;
padding: 0 0 ${theme.space.l};
&::after {
bottom: ${`calc(${theme.space.default} * -1.5)`};
}
&:first-child {
&::before {
top: ${`calc(${theme.space.default} * -2.75)`};
}
}
}
:global(.blogItemLink:first-child) > li::before {
top: ${`calc(${theme.space.default} * -2.75)`};
}
.title {
font-size: 2.5em;
padding: ${`calc(${theme.space.default} * 1.2)`} ${theme.space.l} 0;
}
.meta {
padding: 0 ${theme.space.l} 0;
}
p {
padding: 0 ${theme.space.l} 0;
}
li {
&:hover {
border: 1px solid ${theme.line.color};
box-shadow: 0px 3px 2px rgba(0,0.03);
&:after {
bottom: ${`calc(${theme.space.default} * -2.5)`};
}
:global(.gatsby-image-wrapper) {
transform: scale(1.1);
}
.title {
color: ${theme.blog.h1.hoverColor};
}
}
}
}
@media (hover: hover) {
.meta {
:global(a svg) {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
}
:global(a:hover svg) {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transform: scale(1.3);
color: ${theme.color.brand.primary};
}
}
}
注意:当然要更改基于 CSS 的变量。或者,使用样式组件。
还请记住,如果您想添加 global styles,最简单的原生方法是使用 gatsby-browser.js
文件:
import "./src/styles/global.css"
// or:
// require('./src/styles/global.css')
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。