Как лучше всего обрабатывать стили для вложенных h1 в html5?

В настоящее время я работаю над некоторыми темами HTML5 для нескольких моих веб-сайтов, и у меня все время возникают проблемы с тем, как <h1> можно использовать несколько раз. Кажется, я не могу предсказать, в каких элементах будут отображаться заголовки, но я хочу попытаться их размер автоматически, основываясь на их позиции в DOM...

Я думал об использовании чего-то вроде

h1 { font-size: 3em; }
h2,
body > * > header h1 { font-size: 2.5em; }
h3,
body > * > header h2,
body > * > * > header h1 { font-size: 2em; }

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

<section>
  <ul>
    <li>
      <header>
        <h1>Title of a block</h1>
      </header>
      content
    </li>
 </ul>
</section>

Что делает <h1> намного глубже, чем на самом деле. Каковы хорошие способы справиться с этим?

ОТВЕТЫ

Ответ 1

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

Например, если у вас есть общие заголовки, заголовки статей и заголовки элементов боковой панели, вы можете сделать это:

h1 { font-size: 3em }
h2 { font-size: 2.5em }
article h1 { font-size: 2em }
article h2 { font-size: 1.5em }
aside h1 { font-size: 2.5em }

Вы должны использовать любой селектор, который вы используете для выбора статей или боковой панели для макета (в моем примере теги article и aside это может быть section.sidebar или что-то еще), чтобы различать разные h1 теги.

Между глубиной тега и размером (хотя кажется, что есть шаблон, глубина меньше) меньше. Тем не менее существует связь между конвенцией, используемой для маркировки боковой панели, и размером заголовков на боковой панели. Селектора CSS для заголовков будут совпадать с селекторами для макета, который показывает соединение.

Ответ 2

Во-первых, я немного не уверен, зачем вам нужен

section -> ul -> li -> header -> h1

Почему не просто

section -> header -> h1

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

body section.class{}
body section.class header h1{}

<section class="class">
 <header>
  <h1>Title</h1>
 </header>
 <content>
  <p>Content</p>
 </content>
 <footer>
  footer
 </footer>
</section>

Ответ 3

Это не поможет вам в каком-либо практическом смысле в ближайшем будущем, но есть предложение для CSS сделать этот вид немного чище, селектор any. Общее правило для заголовка второго уровня будет следующим:

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}

Для этого:

any(section, article, aside, nav)
any(section, article, aside, nav) h1 {
  font-size: 20px;
}

Ответ 4

Если вы действительно не можете определить, где будут отображаться ваши элементы h1, у вас есть проблема...

Вам нужно работать с вашими таблицами стилей, которые влияют на разрешенный уровень h1 в механизме выделения. Это секционные элементы (статья, в сторону, nav и раздел) и корневые элементы секционирования (blockquote, body, details, fieldset, figure и td)

Другие элементы не влияют на уровень h1, поэтому их можно игнорировать, но в вашем примере могут быть обертки, такие как ul и li, поэтому ваши селектора css должны использовать дочерние, а не дочерние отношения.

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

Вам нужно что-то вроде:

body h1 { font-size: 3em; }
body section h1 { font-size: 2.5em; }
body article h1 { font-size: 2.5em; }
body nav h1 { font-size: 2.5em; }
body aside h1 { font-size: 2.5em; }
body section section h1 { font-size: 2em; }
body section article h1 { font-size: 2em; }
body section nav h1 { font-size: 2em; }
body section aside h1 { font-size: 2em; }
body article section h1 { font-size: 2em; }
body article article h1 { font-size: 2em; }
  ...
  ...
  ...

И так далее. Повторите для каждого корня для секционирования и для каждого из h1 - h6, и у вас есть массивный файл css.

Намного проще, если вы знаете структуру своей страницы, по крайней мере для секционных и секционных корневых элементов, тогда вы можете просто написать правила для тех комбинаций, которые действительно используются.

Ответ 5

Еще одна вещь, которую вы могли бы сделать, - использовать тег id в теге <h1>. Например, ваш HTML будет:

<h1 id="page-title">My Blog</h1>

И затем в вашем CSS вы можете использовать:

h1#page-title { font-size:2.5em; color:#f00; [etc] }

Обновление: Мне просто сказали, что это может быть неактуальная информация, так что вот мои два бита: так что вложенный <h1> не правильно стиль? Вот как я это исправит, сделав его уникальным идентификатором, а не указывая его с каждым вложенным тегом.

Ответ 6

HTML5 должен сделать кодирование более простым, а IMO - вы делаете заголовок и h1 вещь далеко. Они оба являются тегами заголовка, поэтому спам на обеих страницах по всей вашей странице просто лишний.

На странице должен быть только тег <h1>, чтобы показать всю страницу, для каждой секции не нужен тег h1, как я сказал выше

Несмотря на то, что самым простым способом было бы использовать классы и идентификаторы, как и в прошлом.

<section class="widget">
  <ul>
    <li>
      <header>
        <h1>Title of a block</h1>
      </header>
      content
    </li>
 </ul>
</section>

Затем вы можете удалить все дополнительные селектора, и они могут быть более универсальными.

section.widget h1 { }
section.something h1 { }

Ответ 7

Во-первых, согласно правильному использованию вложенных h1 следует обращаться точно в соответствии с их значением вложенности (включая статью, в сторону, навигацию, раздел, но не любые другие элементы). Это правильное поведение. H1, вложенный внутри элемента секции, должен быть таким же визуально, как h2, а h1, вложенный внутри двух элементов секции, должен быть визуально таким же, как h3... В принципе, короче говоря, есть альтернативная разметка, плавающая вокруг этого почти нет -one использует, но на самом деле более семантически непротиворечивый, который должен использовать только h1, и позволяет определить уровень заголовка по контуру документа.

авторы настоятельно рекомендуют либо использовать только элементы h1, либо используйте элементы соответствующего ранга для уровня вложенности раздела. per Раздел 4.3.11 WHATWG

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

Что касается реализации:

Для веб-браузеров (хром и сафари) и firefox вы можете использовать псевдоселекторы "-moz-any" и "-webkit-any". Это, по сути, то, как стили по умолчанию в стиле firefox и chrome эти элементы отлично соответствуют стандартам:

Например, на заголовках уровня 3 в по умолчанию firefox по умолчанию:

h3, *:-moz-any(article, aside, nav, section) *:-moz-any(article, aside, nav, section) h1 {
    display: block;
    font-size: 1.17em;
    font-weight: bold;
    margin: 1em 0;
}

Это значительно упрощает ответ @Alohci, который правильно предложил.

Проблема, конечно же, не будет работать в IE. Один из вариантов - использовать предварительный процессор CSS, такой как SASS. Я написал следующий фрагмент в SASS, который я использую для разметки заголовка, и который я использую, чтобы эффективно нормализовать в браузерах представление вложенных элементов h1. (Если вы не хотите активно использовать предварительный процессор CSS, вы можете использовать один раз для создания исходного шаблона для этих значений, а затем изменять значения по мере необходимости с течением времени - это, по крайней мере, сэкономит вам тонны ввода и устранить потенциальные ошибки в процессе):

@function bb_permute_lists($left_list, $right_list) {
    $permuted_list: ();

    @each $left_item in $left_list {
        @each $right_item in $right_list {
            $permuted_list: append($permuted_list, $left_item $right_item, comma);
        }
    }

    @return $permuted_list;
}

@function bb_html5_header_markup($level) {
  @if (1 == $level) {
    @return h1;
  }

  $header_containers: article, aside, nav, section;
  $header_markup: $header_containers;
  @for $i from 2 to $level {
    $header_markup: bb_permute_lists($header_containers, $header_markup);
  }
  $header_markup: bb_permute_lists($header_markup, h1);

  @return append(h#{$level}, $header_markup, comma);
}

Эта функция может использоваться следующим образом:

#{bb_html5_header_markup(1)} { 
  font-size: 2em;
    margin: .67em 0;
}

#{bb_html5_header_markup(2)} { 
    font-size: 1.5em;
    margin: .83em 0;
}

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