콘텐츠 시작 부분과 콘텐츠 시작 부분이 동적으로 전환됩니다. div & display - CSS 만

Question

화면의 너비에 따라 내 사이트에 표시되는 콘텐츠의 작은 덩어리를 전환하려고합니다. my site을 방문하면 '코딩이 내 DNA에 있음'옆에 세 개의 '<'표시가 나타납니다. 브라우저 창을 800px 미만으로 줄이면 텍스트가 가운데에 표시되고 3 개의 "<"이 사라지는 것을 볼 수 있습니다.

<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 : -

HTML

방법 A : 나는이 작업을 수행하는 방법을 알고 있지만 현재 내가 이것을 달성하기 위해 다음 코드를 사용하고 두 가지 방법이 있습니다 :

#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에 들어갑니다

그냥 때문에 조금 덜 코딩. 그러나 콘텐츠를 표시하거나 숨기려면 방법 A 또는 방법 B를 사용할 때 어떤 이점과 단점이 있을지 궁금합니다.

몇 가지 질문 -

1. 는 CSS before 선택기를 사용하여 콘텐츠를 전환에 어떤 해가 있습니까?

2. 이전 콘텐츠가 페이지로드와 관련된 렌더링 시점은 언제입니까?

3. 이러한 방법 중 하나가 다른 방법보다 더 신뢰할 수 있습니까? 또는 하나의 방법 효과 페이지로드 시간이 다른 것보다 더 큽니다 (이 작은 규모에서는 차이가 없지만 더 큰 규모의 방법론 문제)?

4. 한 가지 방법은 일반적으로 콘텐츠를 숨기기위한 다른 방법보다 "우수 사례"로 간주됩니까? 아니면 완전히 개인적인 취향입니까?

나는 또한 나는 그것이 SEO에 영향을 않는 방법 가독성, 스크린 리더, 어쩌면 일부 브라우저 호환성 문제 등을 차지하지 않은 일이 있어야 확신은 (다시, SEO는 아마에만 관련이 내용의 훨씬 더 큰 부분이지만 나는 여전히 미래의 참고 문헌을 알기를 원합니다.)

Answer 1

이것은 환상적인 질문입니다.

1. 나는 심각한 피해를 입을 것이라고 말하지 않을 것입니다.실제로는 display: none (IE8의 <에서는 지원되지 않으며 이중 콜론 구문은 IE8에서 중단됩니다.)으로가는 것보다 입니다.
2. 귀하의 경우 브라우저가 CSS를 구문 분석하고 해당 content 규칙을 보게 될 때까지 해당 콘텐츠는 존재하지 않습니다. 방법 B를 사용하는 동안 CSS를 구문 분석하기 전에 내용이 대신 표시됩니다.
3. 의사 요소를 통한 콘텐츠 생성은 로딩 시간에 영향을줍니다. 그러나, 특히 귀하의 특정 경우에 중요하지 않습니다. Here's a fantastic benchmark 다른 질문에 대한 답변입니다.
4. 전적으로 당신에게 달려 있습니다. 추가하는 콘텐츠는 단지 미학적이기 때문에 검색 엔진에서 파싱되지 않도록주의해야합니다. 성능 적중률은 거의 눈에 띄지 않으며 브라우저 호환성은 두 가지 방법 모두에 대한 일반적인 시나리오에서 충분합니다.