Ответ 1

Отвечая на ваш основной вопрос:

tl; dr Неправильная практика изменить свойство default display в моем CSS?

НЕТ

Почему?

A: Потому что это все о семантике

Элементы, атрибуты и значения атрибутов в HTML определяются (по эта спецификация), чтобы иметь определенные значения (семантика). Например, элемент ol представляет упорядоченный список, а атрибут langпредставляет язык содержимого.

Эти определения позволяют обрабатывать HTML-процессоры, такие как веб-браузеры или поисковые системы, представлять и использовать документы и приложения в широкий спектр контекстов, которые автор, возможно, не рассмотрел.

Итак, в вашем случае, если вы действительно нуждаетесь в , имеете 2 заголовка семантически, тогда вы можете менять свои стили, включая свойство display.

Однако Если вы не нуждаетесь в , имеете 2 заголовка семантически, но только для чисто косметика/дизайн (отзывчивый код), то вы делаете это неправильно.

Посмотрите на этот пример:

<h1>Welcome to my page</h1>
<p>I like cars and lorries and have a big Jeep!</p>
<h2>Where I live</h2>
<p>I live in a small hut on a mountain!</p>

Поскольку HTML передает смысл, а не презентацию, ту же страницу также может использоваться небольшим браузером на мобильном телефоне без каких-либо перейдите на страницу. Вместо заголовков в больших буквах, как на на рабочем столе, например, браузер на мобильном телефоне может использовать текст одинакового размера для всей страницы, но с заголовками в выделены жирным шрифтом.

В этом примере основное внимание уделяется заголовкам, но применяется тот же принцип ко всей семантике в HTML.

** Акцент в цитате выше мой [**]

PS. Помните, что заголовки h1 - h6 не должны использоваться для разметки подзаголовков (или субтитров), если только они должны быть заголовком для нового раздела или подраздела.

Учитывая все это выше, вот несколько (хороших) подходов:

Если вы делаете два заголовка исключительно для дизайна, тогда:

• добавить span внутри h1, используя media query либо с использованием мобильного первого подхода (min-width), либо немобильного подхода (max-width).

PROs - легко управляется с помощью CSS, изменяя только свойства.

CONs - добавление дополнительной разметки HTML с использованием media queries.

h1 {
  /* demo only */
  background: red;
  margin:0
}
@media (max-width: 640px) {
  span {
    display: block
  }
}

<div class="container">
  <h1>Header:<span> my header</span></h1>
</div>

Ответ 2

tl; dr - это плохая практика изменения свойства отображения по умолчанию в моем CSS?

Нет. Как выразилось сами W3C; HTML передает значение, а не презентацию.

Как автор HTML, ваша работа состоит в том, чтобы структурировать страницу так, чтобы каждый раздел страницы содержал намеченную семантику, как описано в документации, так что программное обеспечение (браузеры, программы чтения с экрана, роботы...) может правильно интерпретировать ваши содержание.

Как автор CSS, это ваша работа по изменению стиля по умолчанию правильной разметки, чтобы представить его так, как вы хотите. Это включает изменение свойств по умолчанию display так же, как изменение значения по умолчанию color.

Однако любое программное обеспечение может решить, что определенное использование свойств CSS изменяет способ интерпретации вашей страницы. Например, поисковая система может решить, что текст, который имеет тот же color, что и их родительский background, не должен иметь никакого веса для своей системы ранжирования.

В отношении подзаголовков он считал неправильным разметку подзаголовка с элементом <hX>. Что вы должны сделать, так это решить один элемент <hX>, обернуть его в текст <header> и обернуть текст подзаголовка в <p>, <span> или аналогичном.

Ниже приведен пример правильных подзаголовков, взятых из документации W3C:

<header>
  <h1>HTML 5.1 Nightly</h1>
  <p>A vocabulary and associated APIs for HTML and XHTML</p>
  <p>Editor Draft 9 May 2013</p>
</header>

Обратите внимание, что существует несоответствие между спецификацией W3C и спецификацией WHAWG , где последний использует элемент <hgroup> для этой конкретной цели, тогда как предыдущий отклонил его. Я лично перехожу к примеру W3C, но большинство программ по-прежнему будут понимать hgroup, вероятно, на многие, многие годы вперед, если вы предпочитаете подход WHATWG. На самом деле, утверждают, что WHATWG следует следовать за W3C, когда спецификации отличаются.

В вашем конкретном примере, однако, я не уверен, почему вы решили разделить <h1> на два элемента в первую очередь. Если то, что вы отметили как <h1>, на самом деле должно быть общим "ярлыком" для заголовка, тогда его, вероятно, следует считать подзаголовком. Если вам нужно разбить его для стилизации, оберните две части текста в <span> следующим образом:

<h1>
  <span>Header:</span>
  <span>my header</span>
</h1>

Ответ 3

tl; dr - это плохая практика изменения свойства отображения по умолчанию в моем CSS?

Хорошая практика, но тщательно выбирайте, когда использовать его, потому что это может вызвать некоторые критические ошибки структуры.

Почему это хорошая практика

Свойство display открыто для изменений. Это делает HTML простым и универсальным. Элементы HTML имеют значение по умолчанию display, которое соответствует общему поведению - то, что вы обычно хотели бы. Но их не нужно хранить и манипулировать, чтобы имитировать другое свойство display. Например, подумайте о <div>. Очевидно, что большую часть времени вы хотите иметь display: block;, но display: flex; гораздо удобнее время от времени.

Давайте рассмотрим действительно общий пример списков. <li> имеет свойство отображения list-item, которое разбивает строки для каждого нового элемента.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ответ 4

Изменение свойств по умолчанию css не является хорошей идеей, и этого следует избегать, чтобы предотвратить нежелательные недостатки в вашей разметке. Вместо этого вы должны указать "id" или "class" для всех элементов html, которые вы хотите настроить, и создать для них стиль.

Кроме того, использование css типа "h1", "div" и т.д. является самым медленным способом, так как движок пытается найти все эти элементы на странице.

В вашем примере не нужно использовать отображение или float, пока вы даете своим элементам h1 класс css.

Кроме того, использование правильных элементов html для лучшей семантики может быть полезно для таких вещей, как SEO и т.д.

Ответ 5

Разумеется, изменение поведения по умолчанию является избыточным и даже может повлиять на производительность. Как субъективное решение, рекомендуется использовать flex (но я не уверен в его производительности, хотя вы можете его использовать), он широко поддерживается и не меняет никаких свойств элемента css, это просто макет, проверьте это

.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: baseline;
}
.container.mobile {
  flex-direction: row;
}

web
<div class="container">
  <h1>Header:</h1>
  <h2>my header</h2>
</div>
<hr />
mobile
<div class="container mobile">
  <h1>Header:</h1>
  <h2>my header</h2>
</div>

Ответ 6

UPDATE

Кажется, что я, возможно, скрыл Plunker, так как Энтони Рутледж, очевидно, не видел (или забыл его просмотреть). Я предоставил скриншот с несколькими советами о том, как использовать Plunker.

PLUNKER - внедрить

PLUNKER - iNFO

PLUNKER - просмотр

Q и A

Все это приводит к простому вопросу: неудобна ли практика изменения свойства отображения по умолчанию элементов HTML?

Нет, совсем нет. На самом деле это очень распространенная практика веб-разработчиков (включая меня), чтобы изменить не только свойства элемента, но и атрибуты, и это содержимое, чтобы назвать несколько.

Является ли это нарушением стандарта, и его следует избегать, если это возможно?

Нет, но, возможно, так, как это делается, может нарушить сам код, который ИМО вызывает большую озабоченность, чем стандарты. Стандарты, конечно, играют важную роль, но не являются существенными. Если это так, то веб-браузеры должны соответствовать одному стандарту (я говорю с вами IE: P). Сверху моей головы, здесь вещи, которых следует избегать:

• Использование элемента table для макета

   <table>
     <tbody>
         <tr>
          <td><img></td>
          <td><input type="button"/></td>
         </tr>
   ...
  

• Использование встроенных стилей

    <div style="display: inline-block"></div>
  

• Использование встроенных обработчиков событий

    <div onclick='makeASandwich();'></div>
  

Или это наш хлеб и масло, и это не имеет большого значения, если код семантически корректен (поэтому заголовки помещены в h1, статьи помещаются в статью и т.д.)

Изменение свойства отображения элемента - очень маленький, но принципиально важный аспект веб-разработки. Так что да, я полагаю, это можно считать хлебом и маслом, что сделало бы семантику петрушкой, которая использовалась как гарнир и никогда не ела. Семантика субъективна, способ мышления, это не стандарт. Я считаю, что начинающий должен знать о важности (или, по крайней мере, о том, как это важно для других), но не должен быть понтификацией между <article> и a <section> семантически лучше, чем с использованием <main> и <aside>, В свое время семантика будет просто чувствовать себя правильно.

Подход №1: Использование дисплея: встроенный

Я никогда не нашел веской причины использовать display: inline, потому что display: inline-block - гораздо лучший выбор.

Подход №2: использование float

Поплавки - хрупкие предметы антиквариата. Так же, как обращение с тарелками для обеда из бабушки из кости бабушки, вы должны принять определенные меры предосторожности, если планируете их использовать. Помните, как очистить поплавки и не бросать их в посудомоечную машину.

В принципе, если заданы только эти 2 варианта, подход №1 является лучшим выбором, особенно если используется inline-block. Я бы держался подальше от floats, они интуитивно понятны и легко ломаются. Я помню только их использование один раз, потому что клиент хотел, чтобы текст обертывался вокруг изображения.

CSS и CSS/JS

Предусмотрен фрагмент, содержащий 3 демонстрации:

• Чистое решение CSS, использующее display: flex.

• Чистое решение CSS, использующее display: table-row/table-cell.

• CSS и минимальное решение JavaScript с использованием display: inline-block и classList API

Каждая из этих демонстраций идентична на поверхности:

HTML

  <section id="demo1" class="area">
    <!--==Pure CSS Demo #1==-->
    <!--======Flexbox=======-->
    <header class="titles">
      <h1>Demo 1 -&nbsp;</h1>
      <h2>display: flex</h2>
    </header>
   </section>

Это оригинальная разметка со следующими изменениями:

• div.container теперь header.titles

• h1 текст: "Демо #n"

• h2 текст: " prop: value"

• section#demo#n.area обернут все.

Это хороший пример семантики: Все имеет смысл

В нижней части окна просмотра вы увидите кнопки. Каждая кнопка соответствует демонстрации.

Подробная информация о том, как работает каждая демонстрация, а также плюсы и минусы, находится в следующих файлах, расположенных в левом меню Plunker (см. снимок экрана):

• demo1.md flexbox
• demo2.md disply: table
• demo3.md classList

PLUNKER

Дополнительные примечания

• Демо 1 и демо 2 работают от псевдокласса :target. Щелчок по одному из них вызовет событие click. Он напоминает событие, потому что он вызывается click, но нет способа контролировать или знать фазу захвата или пузырька, если она действительно существует. При последующем нажатии первой и второй кнопок он будет демонстрировать нечетное поведение, такое как: переключение другой кнопки, а затем в конечном итоге становится неработоспособным. Я подозреваю, что недостатки :target состоят в том, что CSS обрабатывает события совершенно по-другому с небольшим или никаким взаимодействием с пользователем.

Ответ 7

Лучшей практикой является группировка двух заголовков в hgroup и изменение свойства отображения для мобильных и других представлений с помощью запроса @media.

<hgroup class="headingContainer">
  <h1>Main title</h1>
  <h2>Secondary title</h2>
</hgroup>

Элемент HTML (элемент группы заголовков HTML) представляет собой заголовок раздела. Он определяет один заголовок, который участвует в план документа как заголовок неявного или явного который он принадлежит.

Как hgroup определяет один заголовок для раздела, поэтому изменение свойства отображения внутри hgroup не является практикой кровати.

Ответ 8

Вы должны использовать:

$('element').css('display','');

Это приведет к отображению любого элемента по умолчанию в соответствии с текущим каскадом CSS.

Например:

<span></span>

$('span').css('display','none');

$('span').css('display','');

приведет к span с display: inline.

Но:

span { display: block }

<span></span>

$('span').css('display','none');
$('span').css('display','');

Ответ 9

Вы можете использовать гибкую коробку, чтобы упорядочить элементы, например,

<div class="container" style="display: flex;">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

Попробуйте прочитать этот урок о flex, он действительно отличный и простой в использовании https://css-tricks.com/snippets/css/a-guide-to-flexbox/