Сегодня веб-разработка может быть вихрем различных технологий, и даже самые простые виджеты часто могут быть сложными.
Имея это в виду, я бы хотел сосредоточиться на множестве вещей, которые вы можете сделать только с помощью HTML и CSS, JavaScript не требуется. Почему ты спрашиваешь? Хотя некоторые из этих решений могут не подходить для каждого случая использования, они вдохновляют нестандартное мышление, способствующее снижению сложности и расширению поддержки браузеров. Вот несколько интересных вещей, которые вы можете сделать без необходимости написания одной строки JavaScript.
Создание виджета со вкладками
Мы все видели, как взломать флажок можно использовать для интерактивности без JavaScript, но, к сожалению, это обходится ценой доступности. Поэтому вместо другого учебника по флажкам я хотел бы показать, как можно создать доступный виджет вкладок с помощью псевдокласса :focus в CSS.
Использование: фокус
Псевдокласс :focus используется для нацеливания на элемент, который получил фокус от пользователя (с помощью клавиатуры или мыши). Он поддерживается в любом браузере, включая IE8 +. Кроме того, вы можете применить состояние :focus к любому HTML-элементу, если вы дадите ему атрибут tabindex .
Использование атрибута tabindex
tabindex HTML tabindex указывает, может ли элемент получить фокус. Может принимать несколько значений, включая отрицательное значение, ноль или положительное значение. Каждое из этих значений определяет, в каком порядке должен быть сосредоточен элемент.
Демо для виджета вкладок
В HTML каждая вкладка представляет собой кнопку с содержимым каждой вкладки внутри элемента абзаца. Каждый элемент абзаца скрыт, затем устанавливается в position: absolute чтобы содержимое отображалось в одной и той же области для каждой вкладки. Первый элемент кнопки имеет атрибут autofocus , так что первая вкладка будет видна при начальной загрузке страницы. Каждая вкладка заключена в div, и каждому div присваивается значение tabindex , которое позволяет <div> быть фокусируемым.
Что касается CSS, каждая кнопка настроена на display: inline-block , позволяя вкладкам появляться рядом. Мы применяем псевдо-класс :focus к кнопке и используем соседний селектор брата, чтобы показать связанный элемент абзаца, когда кнопка находится в фокусе. Я также добавил стили фокуса в контейнер контейнера вкладки, что означает, что вкладка будет сохранять свое фокусное состояние, пока пользователь не щелкнет за пределами всего виджета.
Предостережения для виджета Tabs
Поскольку этот виджет зависит от :focus psuedo-class, содержимое вкладок будет видно только тогда, когда вкладки будут в фокусированном состоянии. Это означает, что пользователю всегда придется нажимать на вкладку, чтобы увидеть контент. Атрибут autofocus действительно позволяет одной из вкладок быть видимой при начальной загрузке страницы, но как только пользователь взаимодействует со страницей, фокус будет потерян.
Браузерная поддержка виджета вкладок
Я протестировал это в IE8, и все работает, как и ожидалось, за исключением атрибута autofocus , поскольку это функция HTML5. Chrome, Firefox и Opera также работают должным образом, но демонстрационная версия не работает в Safari, если для наложения фокуса не используется клавиша табуляции. В следующей демонстрации псевдокласс :focus не работает ни в одной из протестированных мной версий Safari, что, как я подозреваю, связано с ошибкой WebKit. Я не нашел способа обойти эту проблему, но до тех пор, пока устранена ошибка WebKit, эта техника должна прекрасно работать, когда пользователь нажимает на вкладки.
В целом, псевдокласс :focus может стать отличным способом добавления функциональности в HTML и CSS без необходимости использования JavaScript. Если вам понравилась эта демонстрация, обязательно оставьте комментарий и, что более важно, сообщите об ошибке в Safari!
Создание слайдера изображений
Если вам нужен простой статический сайт с ползунком изображений, подход, основанный только на CSS, является отличным способом сохранить свет на вашем сайте. Давайте посмотрим на быстрый пример.
HTML и CSS для слайдера
Мы начнем с внешнего контейнера, используя элемент section с классом slideshow . Внутри находится контейнер для слайд-шоу, в котором размещены изображения. Это слайд-шоу также работает с контентом, отличным от изображений. Чтобы подчеркнуть это, у нас есть div с классом text-container который используется для хранения нашего содержимого без изображения.
Самый внешний контейнер демонстрационной версии имеет фиксированную ширину, а его свойство overflow установлено как «скрытое». Контейнер внутри этого, который содержит содержимое нашего слайда, имеет гораздо большую ширину, так что изображения и текстовое содержимое можно размещать рядом друг с другом без переноса на новую строку. Важно отметить, что этот контейнер должен быть точно таким же широким, как и содержимое нашего слайда, иначе слайды не будут правильно перемещаться.
Использование CSS-анимации
Класс slide — это то место, где мы применяем анимацию. Анимация использует свойство translateX для перетаскивания длинного ряда контента через внешний контейнер, который образует маску, имитирующую переход слайдов.
Время анимации является одним из наиболее важных факторов. Чтобы получить четное количество секунд между переходами между слайдами, нам нужно умножить желаемое время перехода на количество слайдов в нашем слайдере. Здесь у нас есть четыре слайда, и наш желаемый переход составляет шесть секунд на каждый слайд — поэтому наше время анимации должно длиться 24 секунды, прежде чем оно повторяется. Бесконечное повторение контролируется значением «бесконечное» в свойстве animation-iteration-count .
Настройка ключевых кадров для этой анимации может быть утомительной. Цель состоит в том, чтобы анимация выглядела как пауза для каждого изображения, хотя на самом деле это никогда не происходит. Для этого нам нужно определить как минимум два пустых ключевых кадра на слайд. Это создает эффект паузы, поскольку ключевые кадры определяют ключевые интервалы, в которые свойство translateX не обновляется. Вы можете увидеть это в демонстрации в строке 66 CSS.
В качестве дополнительного бонуса при наведении курсора на слайдер анимация будет приостановлена. Это можно сделать, установив для свойства animation-play-state значение «paused» при нацеливании на состояние элемента slideshow-container :hover .
Демонстрация слайдера изображений
Поддержка браузера для слайдера изображений
Работает как положено во всех браузерах, включая IE10 и выше!
Создание иконок с помощью индикаторов типов файлов
Некоторое время назад я работал над сайтом WordPress, когда наткнулся на потенциально сложный дизайн. В этом случае требовались разные значки для представления ссылок на основе их типов файлов. Это было прекрасное время, чтобы представить решение без JavaScript на веб-сайте с большим количеством JavaScript. Следующая демонстрация показывает, как получить информацию из блока HTML и отобразить ее с помощью свойства content CSS.
HTML и CSS для значков типов файлов
В этой демонстрации я использую атрибуты данных для отображения типа файла, на который пользователь будет перенаправлен, когда он щелкнет ссылку.
Свойство CSS content принимает в качестве значения функцию attr() которая позволяет нам получить значение нашего атрибута данных HTML. Используя ::after , мы создаем маленькую черную полосу, которая содержит тет в свойстве content, и размещаем ее так, чтобы она отображалась слева от нашего значка.
Функция CSS attr() представляет интересную часть спецификации, но в настоящее время не имеет никакой поддержки браузера для использования за пределами свойства content .
Тип файла Иконки Демо
Браузерная поддержка значков типов файлов
Я был удивлен, обнаружив, что эта демонстрация работала во всех браузерах, в которых я ее тестировал, кроме, конечно, IE8!
Вывод
Для разработчиков становится все более привычным создавать вещи без JavaScript. Это может быть не лучшим решением для всех вариантов использования, но это варианты для рассмотрения, и изучение соответствующих концепций может углубить наше понимание CSS.