Основные приемы HTML, CSS и JavaScript

Автор: Monica Porter

Дата создания: 22 Март 2021

Дата обновления: 17 Май 2024

Видео: Анимация при прокрутке (скролле) страницы на HTML CSS и JavaScript

Содержание

Макет
Clearfix
Размер коробки
Мультиколонки
Расчеты
Стиль
Прозрачность
Фильтры
Замена изображения
Адаптивное видео
Функциональность
Легко выбирать элементы
Создание новых массивов
Очистить документы и оконные объекты
Понравилось это? Прочтите это!

Эта статья впервые появилась в 234-м номере журнала .net - самого продаваемого журнала для веб-дизайнеров и разработчиков.

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

За последние несколько лет, когда мы сделали 360, мы стали свидетелями появления более совершенных стандартов и их реализации, что позволило нам как сообществу разрабатывать новые и более совершенные «методы». Этот новый ландшафт и есть то, что считается «современной сетью».

По мере того, как «Веб 2.0» стал застойным и запутанным, то же самое произойдет и с «современной сетью». Это займет время. Тем не менее, на данный момент мы можем использовать этот термин и злоупотреблять им до тех пор, пока существует общее понимание того, что он представляет.

В 2010 году появилась спецификация HTML5, предоставившая совершенно новую, полустандартизированную веб-среду. Браузеры, такие как Opera, Firefox, Chrome и Safari, восприняли эту новую волну и подтолкнули свои команды разработчиков к новым ограничениям реализации стандартов и исследования API. Чтобы получить представление о том, насколько эти браузеры «встроены», посмотрите на сайте www.html5readiness.com визуализацию изменения поддержки HTML5.

Не беспокойтесь об отсутствии поддержки в Internet Explorer. Мы можем бороться с этим благодаря Google Chrome Frame. С тех пор, как Google представил его в 2010 году, он стал основным механизмом поддержки Internet Explorer. На все версии IE можно настроить Chrome Frame, который предлагает новому пользователю загрузить подключаемый модуль, который отображает выбранные веб-сайты с помощью облегченной версии Chrome внутри IE. Чтобы реализовать Chrome Frame, мы добавляем следующий метатег> в тег head> нашего сайта.

meta http-Equiv = "X-UA-Compatible" content = "chrome = 1" />

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

script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / скрипт>
сценарий>
window.onload = function () {
CFInstall.check ({
режим: "наложение",
пункт назначения: "http://www.yourdomain.com"
});
};
/ скрипт>

Пункт назначения может быть настроен для отправки пользователя по определенной ссылке после установки плагина. Предупреждение: хотя Chrome Frame дает нам метод разработки строго для действительно современных браузеров, мы не должны забывать, что у пользователя есть возможность не загружать подключаемый модуль, если они не хотят этого. Если они этого не делают, и вам необходимо обеспечить поддержку той или иной версии IE, вам придется потратить немного времени на выяснение того, что вы можете, а что не можете предоставить, с учетом вашего опыта, кроссбраузерность..

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

Макет

Clearfix

Плавающий элемент был введен еще в CSS 2.1, но так и не оказался полным решением, на которое мы надеялись. Одной из самых больших проблем было сохранение размеров родительского элемента при перемещении дочернего элемента. Для решения этой проблемы была создана техника clearfix.

Возьмите следующий HTML:

div>
div> ... / div>
div> ... / div>
/ div>

Эту технику написал Николас Галлахер:

.clearfix: раньше,
.clearfix: after {
содержание: " ";
дисплей: таблица;
}
.clearfix: after {
ясно: оба;
}
.clearfix {
* масштабирование: 1;
}

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

Размер коробки

В течение многих лет разработчики обсуждали, какая реализация блочной модели имеет больше смысла. Режим Quirks vs Standards на самом деле означал: «должны ли измениться размеры элемента после установки, когда будут применены границы и отступы, или нет».

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

Популяризованный Крисом Койером и Полом Айришем, всеобъемлющая техника может быть реализована с помощью следующего:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: рамка-рамка;
размер коробки: рамка-рамка;
}

Использование селектора * в CSS обсуждалось из-за потенциальных проблем с производительностью. Подобные утверждения являются несерьезными, если вы не гипероптимизируете все другие аспекты своего веб-сайта / приложения. Использование border-box заставит браузер добавить отступы и границы внутри набора доступного пространства. «Стандартный режим» можно использовать, установив размер блока в поле содержимого.

Мультиколонки

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

п {
-webkit-column-count: 2;
-moz-column-count: 2;
количество столбцов: 2;
}

Вы можете узнать больше о спецификации CSS3 с несколькими столбцами, а также о резервном JavaScript, который можно использовать для любого браузера без поддержки, в блоге A List Apart.

Расчеты

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

.padded {
маржа: 0 авто;
положение: относительное;
ширина: -webkit-calc (100% - (20px * 2));
ширина: -moz-calc (100% - (20 пикселей * 2));
ширина: calc (100% - (20px * 2));
}

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

Стиль

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

Получение правильного стиля элемента всегда зависело от инструментов, доступных нам в CSS. Прозрачность - один из первых вариантов поддержки, с которыми вы столкнетесь в начале-середине 2000-х годов.

С появлением HTML5 и более целенаправленных усилий по стандартизации браузеры имеют стандартную реализацию свойства непрозрачности и предоставляют поддержку альфа-канала в соответствии с новой спецификацией модуля цвета. Сюда входят рекомендации по RGBA и HSLA.

a {
цвет: rgba (0,255,0,0,5);
фон: rgba (0,0,255,0.05);
граница: rgba (255,0,0,0.5);
}

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

Фильтры

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

img src = "market.webp">
img {
-webkit-filter: оттенки серого (100%);
}

Фильтры CSS в настоящее время поддерживаются только в браузерах WebKit, поэтому их использование должно быть аддитивным, а не зависимым. Подробнее читайте здесь.

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

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

h1 class = ’hide-text’> Логотип моего веб-сайта / h1>
.hide-text {
отступ текста: 100%;
белое пространство: nowrap;
переполнение: скрыто;
}

Второй был написан Николасом Галлахером:

.hide-text {
шрифт: 0/0 а;
тень текста: нет;
цвет: прозрачный;
}

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

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

Внедренное видео было одним из наиболее сложных типов носителей из-за того, как сторонние сервисы обслуживают контент. Типичное встраивание YouTube выглядит примерно так:

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

Затем элемент iframe содержит объект Flash или встроенный элемент. Используя что-то вроде iframe {maxwidth: 100%; } не будет работать, потому что вложенные элементы не изменяют размер должным образом при изменении ширины. Итак, мы должны пойти на хитрость.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

Обертывание iframe в другом элементе даст нам контроль, который нам нужен для добавления надлежащей адаптивной функциональности к видео.

.видео {
положение: относительное;
обивка-низ: 56,25%;
высота: 0;
переполнение: скрыто;
}
.video iframe,
.видео объект,
.video embed {
позиция: абсолютная;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
}

Установка нижнего отступа оболочки .video: 56,25%; магия в этом методе. Использование заполнения означает, что используемый процент будет основан на ширине родительского элемента; «56,25%» создаст соотношение сторон 16: 9. Если хотите, посчитайте сами. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (это наш процент).

Функциональность

Легко выбирать элементы

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

var items = document.querySelectorAll (’# header .item’);

querySelectorAll () может передавать несколько и смешанные селекторы. Подробнее об этом.

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

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

var people = ['Хизер', 'Джеймс,' Кари ',' Кевин '];
var welcomes = people.map (function (name) {
вернуть ’Hi’ + name + ’!’;
});

Запустив этот код, если бы мы перешли на console.log (приветствует), вы бы увидели приветствия - это новый массив [«Привет, Хизер!», «Привет, Джеймс!», «Привет, Кари!», «Привет, Кевин!»). ].

Очистить документы и оконные объекты

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

var iframe = document.createElement (’iframe’);
iframe.style.display = "нет";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

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

Дарси Кларк - отмеченный наградами разработчик, соучредитель тематической компании WordPress Themify и агрегатора ежедневных сделок DealPage, а также член команды jQuery. Он работает в Polar Mobile старшим разработчиком UX.