• HTML – это структура и база для построения
Ваш HTML должен иметь смысл и обеспечивать базовую функциональность: ссылки на другие сайты, кнопки, которые отсылают формы к скрипту для перезагрузки страницы, и элементы, создающие контент. Дело в том, что когда все «слетает», браузер остается только с HTML. Если HTML несет смысл, вы – победитель. Но если есть кнопка, которая ничего не делает, вы будете раздражать пользователей.
• CSS определяет интерактивность и визуальность.
Мы шагнули за пределы шрифтов и цвета, к анимации и перемещениям. Медиазапросы позволяют нам делать всевозможные макеты для разных устройств. Используя генерирование контента, мы можем создавать элементы для достижения определенного визуального эффекта без «загрязнения» тегами div и span.
• JavaScript привносит дополнительные функции.
Со скриптом загрузки и AJAX (асинхронный JavaScript и XML), вы можете загружать контент по требованию. Можете добавлять обработчики событий, чтобы элементы реагировали на нажатие пальцев и клик мыши, чтобы они могли считывать ориентацию устройства, и устанавливать, сколько информации прокрутил пользователь или где находится курсор мыши.
Хитрость в том, чтобы объять все эти новые возможности и не позволить старым браузерам «задушить» их. В конце концов, старые приемы никому не помогут. Да, вы могли бы анимировать меню в IE 6, но к чему напрягаться и писать эту функцию, которую «не мешало бы иметь», когда она встроена в другие браузеры?
Функции, доступные нам сейчас
Давайте посмотрим на некоторые функции браузеров, которые мы можем использовать сейчас. Чтобы получить последнюю информацию о том, какие браузеры их поддерживают, обратитесь к великолепному источнику When Can I Use [57], который постоянно обновляется. Кое-что из того, что я рассказываю вам о браузерной поддержке сейчас, через несколько недель может устареть. Это темп нашей жизни и мы должны поддерживать его.
QUERYSELECTOR и QUERYSELECTORALL
Теперь, когда мы узнали об успехе jQuery, у браузеров есть способ обращения к элементам на странице с помощью селекторов CSS. Метод querySelector
обращается к одному элементу, а querySelectorAll
– к списку соответствующих элементов. Синтаксис селектора подобен CSS. Поэтому, document.querySelector(‘#content p’)
обратится к первому тегу параграфа в элементе с ID content
; document.querySelector(‘nav li: last-child’)
обратится к последней позиции списка в первом элементе nav
; а document.querySelectorAll(‘p’)
обратится ко всем параграфам документа. Все просто.
Работаем с классами: CLASSLIST
Масштабный вариант использования jQuery – обратиться сразу ко многим элементам, и изменить стили по методу css(). Это удобно, но в тоже время, раздражает, потому что вы вставляете информацию о стиле в JavaScript. Гораздо проще было бы добавлять класс к рассматриваемому элементу, а остальное предоставить CSS. Из-за этого мы часто повторяли селекторы CSS в jQuery и наших таблицах стилей. Мы вынуждены были делать это, потому что браузеры не поддерживали селекторы CSS3, но сейчас-то поддерживают!
Невероятную мощь дает возможность тестировать классы в элементах HTML и динамично добавлять и удалять их. В JavaScript мы сейчас имеем свойство classList
в HTML элементах, которое содержит коллекцию применяемых CSS классов. Раньше это делалось через className
, который состоял из простой символьной строки и от нас зависело, найдем ли мы другие строки в ней, или добавим и удалим подстроки из нее. С помощью classList
у нас для этого есть методы. Мы можем использовать element.classList.add(name)
для добавления класса, element.classList.remove(name)
– для его удаления, element.classList.contains(name)
для проверки, применяется ли класс, и element.classList.toggle(name)
для включения и выключения класса. Позже в этом разделе мы увидим, как это действенно. Мы сможем избежать введения многих циклов, просто добавляя класс к элементу родителя.
Меняем плавно: CSS TRANSITIONS
Анимация в jQuery в самом деле легкая и смотрится очень ровно. Это из-за того, что jQuery включены easing equations [58], и сегодня они есть также в CSS. Поэтому, если вы хотите растянуть заголовок и поменять цвет его фона со светло-зеленого на оранжевый, вы можете использовать фрагмент со следующей страницы [59].
h1 {
background: #c0ffee;
line-height: 1em;
padding: 0.5em 1em;
– webkit-transition: 1s;
– moz-transition: 1s;
– ms-transition: 1s;
– o-transition: 1s;
transition: 1s;
}
Читать дальше
Конец ознакомительного отрывка
Купить книгу