動態切換內容外觀與之前＆內容比。 div和顯示 - 僅限CSS

我試圖切換顯示在我的網站上的一小部分內容，具體取決於屏幕的寬度。如果您訪問my site，您會注意到「編碼在我的DNA中」這一區域旁邊的三個「<」標記。如果您將瀏覽器窗口縮小到小於800像素，則應該看到文本居中，三個「<」消失。有兩種方法，我知道如何做到這一點，但我目前使用下面的代碼來實現這一目標：動態切換內容外觀與之前＆內容比。 div和顯示 - 僅限CSS

方法A -

HTML：

<div id="home-title" class="col-xs-12 col-sm-6 col-md-5"> 
    Thanks for visiting 

    <h2>DigitalBrent.com</h2> 

    <div id="sub-head">Coding is in my DNA</div> 
</div>

CSS ：

#sub-head::before{ 
    content: "<<<"; 
} 

@media(max-width: 800px){  
    #sub-head::before{ 
     content: ""; 
    } 
}

但它也適用，如果你做像這樣......

方法B -

HTML：

<div id="home-title" class="col-xs-12 col-sm-6 col-md-5"> 
    Thanks for visiting 

    <h2>DigitalBrent.com</h2> 

    <div id="sub-head"><div id="arrows">&lt;&lt;&lt;&nbsp;</div><div id="dont-hide">Coding is in my DNA</div></div> 
</div>

CSS：

#arrows, #dont-hide{ 
    display: inline-block; 
} 

@media(max-width: 800px){  
    #arrows{ 
     display: none; 
    } 
}

我去方法的，因爲它只是一個少一點編碼。但我想知道使用方法A或方法B顯示/隱藏內容的好處和缺點。

一些問題 -

是否有切換使用CSS before 選擇內容有任何傷害？
以前的內容與頁面加載有關的呈現時間是什麼時候？
其中一種方法對另一種方法更可靠，或者一種方法的頁面加載時間會比另一種方法影響更大（也許在這個小範圍內它不會有所作爲，但如果它的規模較大，那麼方法論問題）？
一種方法通常被認爲是「更好的做法」比另一種隱藏內容或完全是個人喜好？

我敢肯定，還必須有事情，我還沒有佔到如可讀性，屏幕閱讀器，可能有些瀏覽器兼容性問題，它是如何影響搜索引擎優化（同樣，SEO可能只是一個有關更大的內容部分，但我仍然想知道以供將來參考）等。

來源

2016-08-03 Digital Brent

這是一個奇妙的問題。

我不會說有嚴重的危害。這確實是比經典的display: none（不支持< IE8和你的雙冒號的語法會在IE8上打破）。
就你而言，直到瀏覽器解析你的CSS並看到content規則，內容將不在那裏。在解析CSS之前，使用方法B時，內容是可見的。
通過僞元素生成內容肯定會影響加載時間。但是，它很可能不會有意義，特別是針對您的具體情況。 Here's a fantastic benchmark由別人在另一個問題上完成。
我會說這完全取決於你。您添加的內容僅僅是美觀的，所以您不應該關心不被搜索引擎解析;在兩種方法的一般情況下，性能影響幾乎不明顯，而且瀏覽器兼容性足夠好。

來源

2016-08-03 17:18:24

太棒了！謝啦！ –

動態切換內容外觀與之前＆內容比。 div和顯示 - 僅限CSS

回答

相關問題