что можно сделать на html и css

Полезные техники HTML, CSS и JavaScript

Техника – это способ справиться с заданием, и у нас, разработчиков и дизайнеров фронтэнда, этих способов бывает достаточно много. При это, будучи погруженными в рутинную работу, мы порой не всегда замечаем как стремительно меняется окружающая нас сфера. В период с 2002 по 2010 годы сообщество фронтэнд-разработчиков буквально покрывалось язвами избыточного кода и ресурсов, от которых страдали и работа сайтов, и удобство их использования. Чтобы с этим справиться, мы придумали уйму хаков, трюков и уловок под кодовым названием «техника». Мы по-прежнему продолжаем выполнять поставленные перед нами задания, просто используем не самые эффективные способы.

Оборачиваясь назад, отметим, что в последние несколько лет установились новые, лучшие, стандарты и способы их применения, позволяя нам создавать более продвинутые «техники». Этот новый мир, открытый перед нами, называется «modern web». Web 2.0, которым восхищались в свое время, сегодня для нас стал запутанным и застойным. С одной стороны нет сомнений в том, что подобная судьба постигнет и то, что мы называем «modern web». С другой — пока что мы можем использовать этот термин и злоупотреблять им сколько угодно, пока понимаем, что он означает.

Используя следующий код мы можем предложить пользователям IE, у которых еще нет этого дополнения, загрузить его с помощью JavaScript:

Возможно, вы помните, как приходилось придумывать кучу уловок для каждого конкретного браузера, чтобы ваш сайт в них хорошо отображался, создавать бесчисленные пустые элементы с порезанными изображениями, писать подробные и даже избыточные коды на JavaScript, чтобы обеспечить работу простейшего функционала. В каком-то смысле, сейчас мы мучаемся с теми же проблемами. Мы по-прежнему боремся за полный контроль, ищем лучшие инструменты для «приструнения» размещения, стиля и функционала, просто сегодня это уже происходит на другом уровне.


Инфографика с www.html5readiness.com, иллюстрирующая поддержку браузерами свойств HTML5 и CSS3.

Расположение

Clearfix

Свойство float было введено еще в CSS 2.1, но так и не стало той панацеей, на которую мы надеялись. Одна из основных проблем — поддержание размеров родительского элемента при плавающем дочернем. Чтобы решить ее, был придуман хак, известный как clearfix. Возьмем следующий HTML:

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

Box-sizing

Разработчики годами спорят о том, какая модель боксов лучше. Противостояние режимов Quirks и Standards на самом деле заключается в одном вопросе, должны ли размеры элемента меняться после установки при применении границ и заполнения, или нет. Теперь все в основном сходятся на том, что имеет смысл считать границы и заполнение частью доступного пространства внутри элемента, а не добавлять их к его ширине и высоте.

Однако с широким распространением хака по изменению размера боксов этот спор утратил свою актуальность. Теперь браузер будет идти у вас на поводу, а не наоборот. Эту универсальную технику, разработанную Крисом Койером и Полом Айришем, можно применить следующим образом:

>> Использование селектора* в CSS многие критикуют за возможное ухудшение производительности. На самом деле снижение довольно несерьезное и его можно не учитывать, если конечно вы не гипероптимизируете ваш сайт/приложения. С помощью функции border-box браузер добавит заполнение и границы внутрь доступного пространства. Режим ‘Standards Mode’ можно использовать, установив размер боксов равным размеру содержания.

Multi-columns

На отображение текстовой информации в Интернете очень повлияли традиции письма и печати, только вот незадача: в данном вопросе он все равно застрял на стадии пергамента. Некоторые проблемы могут быть решены после внедрения долгожданных стандартов Paged-Media и CSS Regions. Хотя надо сказать, что первые шаги с расположениям «как из журнала» были сделаны еще когда браузеры начали внедрять мультиколонки CSS. Код, который потребуется для создания такого эффекта, довольно прост:

Расчет размера

Рассчитывать размеры элементов бывает непросто. Раньше у нас не было никаких инструментов для подсчета используемых в верстке единиц, не говоря уже о подсчете смешанных единиц, но все изменилось благодаря calc. Она создает заполнение, которое не влияет на оригинальную ширину элементов и не использует ничего типа box-sizing:border-box; до недавнего времени это возможно было только через добавление дополнительных элементов.

>> calc() заботится о правильном расчете ширины на основании ширины материнского элемента минус определенное заполнение в 20px. Я умножил это на два для каждой стороны элемента 2, центрировал элемент с помощью относительного поцизионирования и установил автоматические левую и правую рамки.

Стили

Прозрачность

Оформление элемента в нужном стиле всегда зависело от тех инструментов, которые были доступны в CSS. Прозрачность — один из первых поддерживаемых свойств, который вы встретили бы еще в начале-середине двухтысячных. С появлением HTML5 и более эффективной стандартизации, браузеры начали реализовывать свойство непрозрачности по умолчанию, появилась поддержка альфа-канала как в новом стандарте Color Module. В него включены и руководства по моделям RGBA и HSLA.

>> Цветовые модели RGBA и HSLA можно использовать всегда при наличии значений HEX. Там же вы найдете длинный список интересных цветов и определенными именами, которые можно посмотреть в этом стандарте. Они пригодятся для создания динамичного смешения элементов.

Фильтры

Работать с фильтрами в CSS очень интересно. Иметь возможность динамически изменять вид и ощущение элементов на странице без каких-либо дополнений со стороны — это потрясающе, к тому же, так удастся значительно сократить время, проведенное с Photoshop.

>> Фильтры CSS пока поддерживаются только в браузерах на движке webkit, поэтому пока лучше использовать их как дополнение, а не основной инструмент. Дополнительно о фильтрах можно почитать здесь.


Фильтры CSS позволяют дорабатывать изображения на страницах прямо в браузере. Больше примеров набора доступных фильтров, можно найти тут.

Замена изображений

Данная техника применяется уже давным-давно, но, к сожалению, даже новейшие и самые продуманные техники замены не лишены недостатков. Впрочем, недавно стали популярны два удивительных метода, каждый из которых по-своему уникален. Первый из них был написан Скоттом Келлманом:


Метод переключения изображений Скотта Келлмана и Николаса Галлахера

Адаптивное видео

Довольно трудно заставить аудиовизуальные элементы отображаться в правильном масштабе в адаптивной верстке. Теперь, когда все больше сайтов имеют самонастраивающуюся конструкцию, необходимо позаботиться о том, чтобы размеры элементов и разрешение обрабатывались корректно. Встроенное видео — один из самых «упрямых» типов аудиовизуальных средств из-за того, что контент поставляют дополнительные серверы. Встраивание типичного видео с YouTube выглядит примерно так:

>> «Заворачивание» iframe в другой элемент позволит нам применить тот функционал адаптивности, который нам нужен.

>> Основа этого метода — установка wrapper’s padding-bottom видео: 56,25%; Использование заполнения означает, что значения в процентах будут основываться на ширине родительского элемента; ‘56,25%’ даст нам разрешение 16:9. Посчитайте сами, если хотите. 9 / 16 = 0,5625. 0,5625 * 100 = 56,25 (наше значение в процентах).

Функциональные возможности

Простой выбор элементов

С ростом популярности некоторых библиотек JavaScript (например, jQuery), комитет ECMAScript и стандартная комиссия W3C отметили одну из основополагающих деталей в функциональности, которой изначально недоставало разработчикам: выбор элементов. Такие методы, как getElementByID() и getElementsByClassName() быстры, но не так гибки и надежны, как selector engines из сообщества разработчиков; комиссия по стандартизации сымитировала эту гибкость в оригинальном методе-селекторе в виде querySelectorAll().

>> querySelectorAll() может работать с разными и с многими селекторами одновременно. Здесь можно прочитать об этом подробнее.

Создание новых массивов данных

Переборы элементов массива стало очень утомительно писать. Писать и переписывать циклы for(), прямо скажем, скучно. В JS версии 1.6 появился метод map(), поддерживающий более легкий перебор массива и создание нового массива на его базе.

Прогоняя этот код с применением функции console.log(welcomes), вы увидели бы приветствия в новом массиве [ ‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Kevin!’ ].

«Чистка» документов

Отдельные библиотеки JavaScript часто вмешиваются в исходный документ и объекты в окне браузера. Это может представлять неудобство как для других отдельных библиотек, так и для разработчика. В любом случае постарайтесь обеспечить себе «чистые» версии всех объектов, создав новую копию каждого. Лучший способ это сделать — создать элемент iframe, вставить его в модель DOM и хранить новые копии этих объектов.

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

Источник

Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт

Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.

3D-анимация на JS

Первый трюк — замечательный трёхмерный эффект на JS.

Как видите, когда указатель мыши проходит по этой «карточке», элементы внутри нее обретают трёхмерность.

Как это делается

Сначала создаётся HTML div:

Здесь у нас есть основной класс (card) и два других класса внутри card (header and info). Header будет классом, содержащим изображение (в нашем примере — логотип Medium), а info будет содержать текст в карточке. Теперь давайте добавим CSS, чтобы карта выглядела лучше.

Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг — добиться 3D-эффекта при наведении курсора мыши на карту. Для этого я воспользовался JS:

Откройте для себя Vanta.js для анимации фона

Устали от статичных цветов и изображений на фоне веб-страницы? VantaJs разработана, чтобы оживить фон:

Как это делается

Это довольно просто. Добавьте в HTML такой код:

Это установит фон Vanta.js Globe для идентификатора htmlid.

Чтобы переключаться между ними, измените VANTA.GLOBE на VANTA.[Backgroundname]. Конечно, перед этим нужно добавить соответствующий cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[backgroundname].min.js.

ScrollReveal

Для тех, кто не знал об этой фантастической библиотеке JS, ScrollReveal может отображать элементы при прокрутке веб-страницы:

Как это делается

Изменение размера и цвета букв

Этот небольшой трюк с CSS действительно впечатляет при правильном использовании:

Как это делается

Создайте несколько новых HTML-элементов span и укажите их класс:

3. Применяя CSS :hover, мы изменяем размер букв и их цвет:

Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет. Чтобы добиться еще более динамичного эффекта, я предлагаю создать отдельный класс для каждой буквы с разными размерами и цветами. Кроме того, вы можете применить CSS :hover к каждому типу элемента в HTML. Например, я тоже применил его к своей контактной форме:

Свойство animation

Дополнили материал описанием свойства из статьи Криса Койера.

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color, background-color, height, или width. Каждая анимация должна быть определена с помощью @keyframes, которое затем вызывается с помощью свойства animation, например:

Каждое правило @keyframes определяет, что должно происходить в определённые моменты анимации. Например, 0 % — это начало анимации, а 100 % — её конец. Этими ключевыми кадрами можно управлять либо с помощью сокращённого свойства animation, либо с помощью его восьми подсвойств, чтобы обеспечить больший контроль над ключевыми кадрами.

Подсвойства

Вот полный список значений, которые может принимать каждое из этих вложенных свойств:

Несколько шагов

Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0 и 100 % внутри @keyframes:

Несколько анимаций

Вы можете разделить значения запятыми, чтобы также объявить несколько анимаций в селекторе. В приведённом ниже примере мы хотим изменить цвет круга в @keyframe, одновременно перемещая его из стороны в сторону с помощью другого свойства.

Производительность

Анимация большинства свойств является проблемой производительности, поэтому мы должны соблюдать осторожность перед анимацией любого свойства. Однако есть определённые комбинации, которые можно безопасно анимировать:

Какие свойства можно анимировать?

Поддержка браузерами

Эти данные о поддержке браузера взяты с сайта Caniuse, где имеется более подробная информация. Число означает, что браузер поддерживает функцию в этой версии и выше.

Настольные

Префиксы

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

Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт пет-проекта, над которым вы работаете. Если у вас есть какие-то свои трюки — призываю делиться ими в комментах. И не забывайте о промокоде HABR, который дает дополнительную скидку 10% к той, что указана на баннере.

Источник

Руководство по HTML/CSS/JavaScript

Frontend Guidelines

Правила и руководства оформления, форматирования HTML, СSS и JavaScript кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

От переводчика

Приветствую всех снова, меня зовут Максим Иванов, и сегодня я подготовил перевод, который, возможно, окажется для вас полезным. Бенджамин Де Кук (Benjamin De Cock), разработчик из Бельгии, собрал некоторые указания по оформлению кода, которые позиционируют себя как лучшие практики по написанию HTML, CSS, JS. Конечно, существует множество рекомендаций, например, есть хороший гайдлайн от Google, наверное, есть еще что-то, однако, если следовать хотя бы некоторым из них, то можно надеяться, что ваш код станет лучше. В отдельных случаях следование этим гайдлайнам не полезно, а совсем наоборот. В общем и целом, все зависит от вашего опыта и виденья дела, если вы новичок, то скорее вам будет полезно оценить то, что пишут другие и в обществе считается верным, если вы гуру, то наверное вам и не нужны гайдлайны, которые написаны непонятно кем на ваш взгляд. Итак, приступим.

JavaScript

Семантика

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

Убедитесь, что вы поняли семантику элементов, которые вы используете в своем коде. Очень плохо использовать семантические элементы не по назначению или не в том месте, если бы вы просто оставались нейтральными к этим этим семантическим элементам.

Лаконичность

Старайтесь кратко писать код. Забудьте о своих старых привычках, перетекающих из XHTML.

Читабельность

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

— использовать атрибут alt правильно
— связывайте имена (links) и элементы (buttons) и называйте их по смыслу (

— это зверство)
— не полагайтесь на название цветов, в качестве информации
— явно связывайте определенной меткой и элемент формы

Язык документа

Определении языка и кодировки символов не является обязательным, однако рекомендуется всегда объявлять их на уровне документа, даже если они указаны в заголовках HTTP. Приоритетной кодировкой символов является UTF-8.

Эффективность

Если нет уважительных причин добавлять загрузку скриптов до контента, старайтесь прописывать скрипты в конце документа, тем самым ваши скрипты не будут блокировать рендеринг страницы. Если у вас очень тяжелые таблицы стилей, старайтесь разбить их на несколько и загружать по отдельности, так чтобы первичный контент был сразу отрисован. Очевидно, чем больше файлов, тем больше HTTP запросов, два запроса, конечно, медленнее, чем один, но в нашем случае, важным фактором будет являться скорость отображения нужного контента.

Точка с запятой

В то время как точка с запятой является чисто технически разделителем правил, CSS всегда относится к точке запятой, как к оператору завершения.

Box model

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

Потоки

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

Аналогично, не вытаскивайте из основного потока элементы, если вы можете обойтись без этого.

Позиционирование

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

Селекторы

Минимизируйте сочетания селекторов связанных с DOM. Иногда, лучше добавить лишний класс элементу, который вы хотите найти, чем искать его через три структурных селектора: псевдо-класс, потомок, комбинатор.

Избегайте перегрузку селекторов.

Специфичность

Не используйте значения и селекторы, которые нельзя переопределить. Минимизируйте использование id (идентификаторов) и избегайте правило !important

Переопределения

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

Наследование

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

Лаконичность

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

Англоязычные обозначения

Предпочтительно использовать английскую математику.

Вендорные префиксы

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

Анимация

Иногда предпочтительнее использовать переходы (transitions), нежели анимацию (animations). Избегайте анимирование свойств в пользу opacity и transform.

Единицы измерения

Используйте безразмерные значения. Старайтесь использовать rem, если вы рассчитываете все в относительных единицах. Предпочтительно использовать секунды, а не миллисекунды.

Цветовая модель

Если нужна прозрачность, использовать rgba. В противном случае, всегда используйте шестнадцатеричный формат.

Отрисовка

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

JavaScript

Производительность

Легкочитаемый, выразительный и правильный код важнее производительности. На самом деле, JavaScript никогда не будет вашим узким местом в расчете на производительность. Лучше уделять внимание таким вещам, как сжатие изображений, оптимизация http-запросов и доступа к сети, перерасчет DOM-дерева. Если вы запомните хотя бы одну из рекомендаций в данной статье, опирайтесь на нее.

Независимость от внешнего состояния

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

Нативность

Полагайтесь на стандартные методы, как можно больше.

Принудительное сравнение

Лишние сравнения не имеют смысл, избегайте их.

Циклы

Не используйте циклы, так как они заставляют вас использовать изменяемые объекты. Полагайтесь на методы Array.prototype.

Если вы не можете использовать методы Array.prototype, используйте рекурсию.

Вот общая функция Loop, делающая рекурсию проще в использовании.

Аргументы

Забудьте об arguments как об объекте. Остаточные параметры это всегда лучший вариант, потому что:
1. Передаваемое имя дает лучшее представление о том, что ожидает функция на входе
2. Остаточный параметр — это массив и он легок в использовании

Использование метода apply

Забудьте метода apply(). Вместо этого используйте оператор распространения (вызова функции).

Использование метода bind

Не используйте bind(), когда есть более идиоматические подходы.

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо
2. bind(), а также итераторы в JavaScript

Методы высшего порядка

Избегайте вложенных функций там где это не нужно.

Композиции

Избегайте несколько вложенных вызовов функций. Используйте вместо них композицию.

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо

Кеширование

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

Переменные

Используйте const вместо let и let вместо var.

Условия

Будьте привержены концепции IIFE’s (немедленно выполняемый функтор), используйте возвращаемые значения в условиях (if, else if, else и switch).

Итераторы

Избегайте цикл перебора for. in

Разница между циклом и методом в том, что цикл перечисляет свойства и из цепочки прототипов.

Объект как ассоциативный массив

В то время как объекты можно законно использовать, как правило, ассоциативный массив (Map) лучше и мощнее. Если сомневаетесь, тогда точно используйте Map.

Каррирование

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

Читабельность

Не скрывайте намерения вашего кода, используя умные трюки.

Повторное использование кода

Не бойтесь создавать много мелких и многоразовых функций, они очень полезны.

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо

Зависимости

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

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо
2. Путь JavaScript модуля и документация по библиотеке Underscore

Источник