Dynamische Umschaltung der Inhaltserscheinung mit before & content Vs. div & display - Nur CSS

Question

Ich versuche, einen kleinen Teil des Inhalts, der auf meiner Seite angezeigt wird, abhängig von der Breite des Bildschirms umzuschalten. Wenn Sie my site besuchen, werden Sie die drei "<" Markierungen neben dem Bereich bemerken, der "Kodierung ist in meiner DNA" sagt. Wenn Sie Ihr Browserfenster auf weniger als 800 px verkleinern, sollten Sie sehen, dass der Text zentriert wird und die drei "<" verschwinden. Es gibt zwei Möglichkeiten, dass ich weiß, wie dies zu tun, aber zur Zeit bin ich mit dem folgenden Code, um dies zu erreichen:

Methode 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: ""; 
    } 
} 

Aber es funktioniert auch, wenn Sie es tun es wie folgt ...

Methode 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; 
    } 
} 

ich für Methode A ging, weil es nur eine ist etwas weniger Codierung. Aber ich frage mich, was die Vorteile und Nachteile für die Verwendung von Methode A oder Methode B zum Anzeigen/Ausblenden von Inhalt sein könnten.

Einige Fragen -

1. Gibt es einen Schaden in den Inhalt Makel des CSS before Selektor?

2. Wann wird der before-Inhalt in Relation zur Seitenauslastung gerendert?

3. Ist eine dieser Methoden zuverlässiger auf der anderen oder wird eine Methode Seitenladezeiten mehr als die andere beeinflussen (vielleicht in diesem kleinen Maßstab wird es keinen Unterschied machen, aber wenn es in einem größeren Maßstab wäre würde die Methodensache)?

4. Wird eine Methode im Allgemeinen als "bessere Methode" angesehen als die andere, um Inhalte zu verbergen oder handelt es sich um eine ganz persönliche Präferenz?

Ich bin sicher, dass es auch Dinge sein muss, ich habe nicht für wie Lesbarkeit ausmachen, Screenreadern, vielleicht einige Browser Kompatibilitätsprobleme, wie sie SEO wirkt sich (Auch hier ist SEO wahrscheinlich nur relevant für einen viel größeren Abschnitt des Inhalts, aber ich würde immer noch gerne für zukünftige Referenz wissen), usw.

Answer 1

Dies ist eine fantastische Frage.

1. Ich würde nicht sagen, dass es einen ernsthaften Schaden gibt.Es ist in der Tat als mit dem klassischen display: none gehen (nicht unterstützt auf < IE8 und Ihre Syntax Doppel Doppelpunkt würde auf IE8 brechen).
2. In Ihrem Fall, bis der Browser Ihr CSS analysiert und sieht, dass content Regel, der Inhalt wird nicht da sein. Bei der Verwendung von Methode B wird der Inhalt vor dem Parsen des CSS stattdessen angezeigt.
3. Wenn Sie Inhalte über Pseudoelemente eindeutig generieren, wirkt sich dies auf die Ladezeiten aus. Es wird jedoch höchstwahrscheinlich nicht signifikant sein, besonders in Ihrem speziellen Fall. Here's a fantastic benchmark von jemandem auf einer anderen Frage erledigt.
4. Ich würde sagen, das liegt ganz bei Ihnen. Der Inhalt, den Sie hinzufügen, ist lediglich ästhetisch, daher sollten Sie nicht darauf achten, nicht von Suchmaschinen geparst zu werden; Der Leistungshit ist kaum bemerkbar und die Browserkompatibilität ist für allgemeine Szenarien beider Methoden gut genug.