DIV эквивалент HTML5

Question

Я пытаюсь повторить учебник, на который я разместил ссылки в предыдущем вопросе, чтобы иметь как можно больше HTML5 и CSS3 кода.В некоторых онлайн-статьях я читал, что в HTML5 они пытаются избавиться от идеи тегов Div, а скорее стремятся к чему-то, известному как section.Это правильное наблюдение.Например, у меня есть этот раздел кода из приведенного выше учебникаhttps://skitch.com/android86/r67ey/dreamweaver и что мне интересно знать, следует ли мне использовать теги div в моем HTML5-коде или есть лучший способ сделать это, чем использовать Div?В моем HTML5-коде в настоящее время есть следующее.https://skitch.com/android86/r67ej/dreamweaver Спасибо за ценный вклад группы.

Answer 1

Представленный код выглядит хорошо, однако я бы добавил дополнительные строки, чтобы охватить Firefox и Opera.

-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

Затем можно использовать Modernizr (http://www.modernizr.com/), чтобы покрыть все браузеры резервной копией Javascript.

Я бы использовал что-то вроде этого:

    a.slideDown {
    z-index: 100;
    position: fixed;
    display: block;
    background-color: black;
    width: 100%;
    height: 500px;
    -webkit-transition: top .2s ease;
    -moz-transition: top .2s ease;
    -o-transition: top .2s ease;
    transition: top .2s ease;
    top:5px;

}  

a:hover.slideDown {
top:495px;
}

Answer 2

подтверждение концепции для скользящей ссылки над контентом (с display: block) при наведении, используя только переходы CSS3.
ВНИМАНИЕ: это синтаксис только для webkit (safari & chrome), синтаксис для остальных браузеров приведен здесь: http://css3.bradshawenterprises.com/transitions/
простой элемент со следующим стилем:

a {
    z-index: 100;
    position: fixed;
    -webkit-transition: all 1s ease-in-out;
    display: block;
    background-color: black;
    width: 100%;
    height: 500px; }  

и стиль состояния наведения:

a:hover { height: 700px; }

Answer 3

Я бы согласился с комментариями об использовании CSS3 для переходов.Я использовал это на сайте портфолио, и это выглядит довольно хорошо.Это всего лишь пара строк кода, и если браузер не поддерживает переходы, он все равно будет отображать содержимое при наведении курсора, просто без анимации.

Answer 4

Если вы включаете CSS3 как часть HTML5 (что необходимо для анимации!), Взгляните на: http://css3.bradshawenterprises.com/sliding/.В jQuery нет необходимости, вместо этого можно использовать псевдоэлемент: target.

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

Это, вероятно, около 4 строк кода, если вы хотите, чтобы он работал только в новых браузерах.