Вы слишком ленивы для создания разметки с независимым CSS

15 инструментов для аудита и оптимизации кода CSS

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

Если вы уже столкнулись с подобной проблемой, то пришло время провести аудит вашего CSS -кода и оптимизировать его. Мы отобрали 15 инструментов, которые помогут вам сделать это. Некоторые из них помогут уменьшить размер файла с CSS , другие поспособствуют повышению производительности страниц.

1. Type-o-Matic

Type-o-matic представляет собой Firebug -плагин, который умеет анализировать шрифты, использованные на страницах сайта. Этот плагин выводит отчет в виде таблицы с информацией о свойствах используемых шрифтов ( семейство, размер, цвет и другое ).

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

2. CSSCSS

Инструмент анализирует ваши CSS -файлы на наличие дублей. Это позволит уменьшить размер CSS и гораздо удобнее работать с ними в дальнейшем. Инструмент очень прост в установке – он реализован в виде пакета расширения для Ruby , и запускается из командной строки.

3. CSS Lint

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

4. CSS Colorguard

Зачастую попадаются клиенты, желающие использовать такие цвета, о существовании которых вы даже не подозревали. CSS Colorguard поможет составить необходимые цветовые схемы, и предупредит в том случае, если вы используете два одинаковых цвета.

5. CSS Dig

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

6. Dust Me

Dust-Me – плагин для Firefox и Opera , который выводит неиспользуемые селекторы из таблицы стилей. Инструмент берет весь CSS вашего сайта, и показывает, какие именно селекторы используются, а какие лишние.

7. Devilo.us

Devilo.us – продвинутый движок для сжатия и оптимизации CSS -кода, который теперь поддерживает CSS3 .

8. PurifyCSS

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

9. Atomic CSS

Atomic CSS поможет уменьшить CSS -файлы. Он позволяет оптимизировать скорость загрузки страниц, исключает зависимости, а также умеет многое другое.

10. Clean CSS

CleanCSS представляет собой многофункциональный CSS -оптимизатор. Инструмент берет ваш CSS -код и делает его чище и меньше в объеме. Вы можете оптимизировать код, написанный на разных языках: javascript , json , python , html и т. д.

11. PubCSS

Инструмент облегчает форматирование CSS -кода страниц академических изданий. Это библиотека CSS -стилей для форматирования документов под печать и публикацию в интернете.

12. CSSO

CSSO (CSS Optimizer) ¬– это инструмент, который производит структурную оптимизацию ваших CSS -файлов.

13. Helium

Helium – это инструмент для выявления неиспользуемых CSS -свойств на всех страницах сайта. Он основан на javascript и работает прямо в браузере. Helium принимает список URL -адресов разделов сайта, а затем анализирует каждую страницу для последующего составления списка всех стилей. После чего выявляет не использующиеся свойства CSS .

14. Strip Comments

Strip CSS Comments значительно облегчает следующие задачи: удаление комментариев из CSS -файлов, уменьшение размеров файлов. Он также доступен в виде плагина для gulp/grunt/broccoli .

15. CSS Shrinks

Инструмент позволяет без труда оптимизировать CSS -файлы, сохраняя последовательность и формат разметки. В нем есть несколько средств, которые позволяют удалять в документе пробелы и комментарии.

Возможно, у вас на примете есть еще какие-нибудь полезные CSS -инструменты? Пожалуйста, поделитесь ими в комментариях!

Данная публикация представляет собой перевод статьи « 15 CSS Tools to Audit and Optimize Your CSS Code » , подготовленной дружной командой проекта Интернет-технологии.ру

Очередной блог фрилансера

коротко и полезно о веб-разработке

Изучаем CSS-позиционирование за 10 шагов

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float.

1. position: static

По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.

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

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:

Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.

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

3. position: absolute

При абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете.

Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.

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

5. position:relative + position:absolute

Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.

6. Две колонки

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

Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.

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

8. Float

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

Назначив блоку float, мы максимально возможно оттолкнем его к правому (или левому) краю, а следующий за блоком текст, будет обтекать его. Обычно такой прием используется для картинок, но мы будем использовать его для более сложной задачи, поскольку это единственный инструмент, имеющийся в нашем распоряжении.

9. “Плавающие” колонки

Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.

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

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.

Или же назначить родительскому контейнеру свойство overflow: hidden

В любом случае, результат будет один и тот же.

Заключение

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

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

Создание разметки: основные правила

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

Безусловно, существуют общепризнанные методы разметки, а также т. н. best practices — оптимальные способы достижения цели, которые были определены практическим путем. Но в целом, чтобы добиться успехов в изучении этого ремесла, важна практика, практика и еще раз практика.

В этом уроке мы расскажем об основных правилах, которые помогают в построении грамотной разметки. Придерживаться этих правил или нет — ваш выбор, однако рекомендуем помнить о них, когда вы будете работать с реальными проектами. Кроме этого мы дадим несколько рекомендаций по ведению кода и работе с графикой.

Mobile First

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

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

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

Каркас

Прежде чем приступать к верстке страниц сайта, желательно иметь примерные наброски их структуры: количество колонок, расположение основного контента, содержимое хедера и футера и т. д. Это можно сделать как на бумаге, так и в графическом редакторе. Определившись с тем, где и как будут расположены элементы веб-страниц, вы сможете более быстро создать HTML-каркас, который затем будет стилизоваться через CSS.

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

Верстка

На основе макетов можно приступать к написанию HTML и CSS-кода. Имея представление о том, какие элементы будут на веб-странице, можно подобрать для них соответствующие теги.

С помощью CSS добавляется стилевое оформление для элементов. Есть есть необходимость в дополнительных «зацепках» для стилей CSS, к тегам добавляются классы. Давайте описательные и лаконичные имена классам — это хороший тон.

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

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

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

Кстати, визуально перемещать элементы можно и с помощью уже хорошо знакомых вам свойств margin и padding . При добавлении к элементу полей и/или отступов с определенной стороны образуется пустое пространство, которое, по сути, смещает элемент. Например, добавив с верхней стороны блочного элемента свойство margin с положительным значением, мы сместим элемент вниз, а отрицательное значение приведет к смещению элемента вверх.

Подходы к созданию макета

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

С появлением свойства float стало возможным создавать макеты без таблиц. И хотя этот подход еще популярен, он уже не является самым современным способом создания разметки.

Спецификация CSS Flexible Box Layout Module подняла верстку на новый уровень и очень упрощает разработку макетов. Среди преимуществ Flexbox выделяется возможность сделать любой блок «резиновым», гибкое поведение элементов, инструмент для горизонтального и вертикального выравнивания, автоматическое преобразование элементов в столбцы и строки и многое другое. И если еще в 2014 году Flexbox еще не был столь популярным, то в 2020, учитывая вышедший Bootstrap 4, который основан именно на flex-модели, можно смело считать, что ближайшее будущее будет за Flexbox.

Комментирование кода

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

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

Графика

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

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

Адаптивная верстка (теория).

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

В этой cтатье мы с Вами разберем такие понятия как отзывчивый веб-дизайн и адаптивный веб-дизайн, рассмотрим их отличия и преимущества, рассмотрим ситуации при которых необходимо использовать эти приемы на практике. Кроме того, мы с Вами узнаем, что такое медиазапросы, как и для чего необходимо использовать их в своих стилях.

Основные понятия

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

Что представляет из себя отзывчивый веб-дизайн (responsive web design)? Это прежде всего гибкая, или по другому «резиновая» сетка макета вашего сайта основаная на относительных единицах измерения, которая позволяет использовать один макет для разного типа устройств, гибкие изображения и видеоматериалы, и медиазапросы.

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

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

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

И так, адаптивный веб-дизайн (adaptive web design) включает в себя гибкую сетку макета сайта, гибкие изображения и видеоматериалы, медиазапросы и прогрессивное улучшение (progressive enhancement).

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

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

Подготовка к адаптивной верстке

В настоящее время до сих пор многие сайты созданы для отображения на экранах мониторов, по этой причине мобильные браузеры не отображают страницу на все 100%, а отображают её в виртуальном окне (viewport), которое, как правило, шире экрана устройства. Чтобы страница поместилась на экране устройства мобильные браузеры уменьшают её масштаб (сжимают отображаемый результат, чтобы его можно было увидеть сразу), коэффициент масштабирования зависит от характеристик конкретного устройства. Пользователи при этом могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.

Это поведение мобильных браузеров позволяет справляться с большинством сайтов, но не подходит для сайтов с адаптивным веб-дизайном, для которых масштабирование не приемлемо.

Впервые в мобильной версии браузера Safari появился метатег области видимости (viewport meta tag), который позволяет разработчикам сайтов контролировать как размер окна просмотра, так и масштаб самой страницы. Впоследствии остальные современные мобильные браузеры осуществили поддержку этого метатега, не смотря на то, что в тот момент он не являлся частью какого-либо веб-стандарта.

Ранее в статье «Метаданные в HTML» учебника HTML мы уже сталкивались с метатегами (HTML элемент ), они предоставляют дополнительную информацию браузеру пользователя о содержимом страницы и могут передавать браузерам дополнительные инструкции о способах отображения страницы на экране, позволяют указать описание страницы, ключевые слова, автора документа и другие метаданные, к которым относится и возможность отмены масштабирования в браузерах мобильных устройств.

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

• Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
• Значение w > атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
• Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

Приоритет создания стилей

Давайте рассмотрим еще одну важную теоретическую тему, связанную с тем под какое устройство начинать разработку сайта — для мобильных устройств или компьютеров?

В настоящее время существует два основных подхода:

• Mobile first — подход при котором разработка сайта начинается и ориентирована на пользователей мобильных устройств. В первую очередь описываются стили, предназначенные для смартфонов, а затем дизайн дорабатывается для планшетных устройств и настольных компьютеров (начинается с размещения основной функции, а затем постепенно добавляются дополнительные элементы для более высоких разрешений, часто это называют progressive enhancement — прогрессивным улучшением). При использовании этого подхода Вы должны учитывать то, что Ваши страницы должны быть оптимизированы, максимально быстро загружаться и отображать важное содержание в первую очередь. Прочая информация должна загружаться и отображаться пользователю по его требованию, страница не должна загружать те ресурсы, которые не потребуются пользователю для получения необходимой информации. Этот подход в источниках упоминают также как content first, по той причине, что контент вашего проекта должен быть тщательно исследован и структурирован, чтобы быть классифицированным на основе важности. Подход mobile first может быть намного дороже, чем подход desktop first из-за более длительной фазы подготовки и опыта, необходимого для создания проекта.
• Desktop first — подход при котором разработка ведется для для многофункциональных проектов, ориентированных на пользователей настольных компьютеров. В первую очередь описываются стили, предназначенные для компьютеров, а затем дизайн дорабатывается для планшетных устройств и смартфонов. При использовании этого подхода Вы первоначально доводите до максимума и совершенства дизайн и функционал Ваших страниц, а затем адаптируете его под новые разрешения и устройства, удаляя при этом необходимые колонки, перестраиваете стили и позиционируете отдельные блоки, изменяете шрифт и тому подобное. Переход к меньшему разрешению часто называют изящной деградацией — graceful degradation, при которой происходит скрытие и обертывание элементов, пытаясь сохранить при этом как можно больше исходного функционала. Как правило, деградация с настольной версии на мобильную приводит к сбоям в работе пользователей, это связано с тем, что некоторые настольные технологии просто не поддерживаются на мобильных устройствах и должны быть заменены резервным решением, которое, вероятно, будет сложным и дорогостоящим для реализации. Крупные компании зачастую создают дополнительно отдельное приложение для Android или iOS для основных функций, которые будут служить для оптимизации работы мобильных пользователей.

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

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

Медиазапросы

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

Используя медиазапросы Вы сможете создавать точки останова, это чем то похоже на создание ключевых кадров в анимации, только в этом случае вы будете использовать разрешение экрана в пикселях, а не временные отрезки. Например, если ширина области простмотра устройства меньше 480 пикселей, то использовать одни стили, если ширина области простмотра устройства находится в диапозоне от 480 пикселей до 769 пикселей использовать другие стили и так далее.

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

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

Ниже представлено отображение этого сайта в режиме устройства в браузере Chrome:

Что должны изменять медиазапросы?

В этом разделе мы рассмотрим с Вами основные изменения страниц сайта, на которые должны быть нацелены Ваши медиазапросы:

Исходя из представленного изображения медиазапросы должны быть ориентированы на следующие изменения:

• «Резиновая ширина» — использование фиксированной ширины (свойство w >auto ), или значения в процентах. Это позволит превратить фиксированную сетку макета в резиновую, и независимо от разрешения экрана элемент поместиться на экране, не вызывая при этом переполнение содержимого. Обратите внимание, что в этом случае даже при смене ориентации экрана содержимое элемента просто растянется и подстроится под необходимое разрешение.
• Изменение количества колонок — в зависимости от разрешения экрана изменяйте количество колонок в макете, например, четыре колонки будут хорошо смотреться на настольных компьютерах и планшетах с альбомной ориентацией, но этот макет не будет подходить для смартфонов, где было бы предпочтительно использовать две колонки и тому подобное.
• Сужение пустого пространства — по возможности производите сужение внутренних и внешних отступов элементов (margin и padding) для размещения большего количества необходимой информации на небольших экранах, при использовании высоких значений для отступов пользователям мобильных устройств потребуется лишний раз прокручивать содержимое, что может негативно сказаться на визуальном отображении и удобстве при чтении.
• Изменение навигации — традиционная горизонтальная панель навигации, используемая на большинстве сайтов, по мере сужения экрана будет вызывать переполнение содержимого, или перемещать элементы меню на новые строки, занимая всё больше пространства экрана. В некоторых случаях такое поведение будет допустимо, но в большинстве случаев такой подход не будет решать необходимую задачу. Существует несколько подходов изменения навигации, например, использование отдельной навигации для мобильных устройств, которая будет отображаться при определенном разрешении, а горизонтальная панель при этом будет скрываться, или применение динамических изменений навигации с использованием языка программирования JavaScript и CSS стилей, которые позволят создать оптимальное отображение на устройстве, например, отображать вертикальную навигацию по нажатию на определенную кнопку.
• Настройка шрифта — при создании медиазапросов обратите внимание на тот момент, что крупные заголовки хорошо смотрятся на мониторах настольных компьютеров, но на мобильных устройствах трудно читаются и могут занимать большое количества пространства. По этой причине необходимо уменьшать размер шрифта для мобильных устройств, а что касается основного текста с информацией, то в этом случае наоборот следует увеличивать размер шрифта для лучшего восприятия информации.
• Изящная деградация — используйте медиазапросы для того, чтобы скрыть то содержимое страниц сайта, которое по Вашему мнению допустимо явно не отображать пользователям мобильных устройств. Как правило, для этого достаточно указать для необходимых элементов свойство display со значением none .
• Изменение фоновых изображений — если вы используете растровые изображения, например, формат png в качестве фона для элемента, обратите внимание на такой момент, что при уменьшении разрешения экрана фоновое изображение будет масштабироваться теряя при этом свой изначальный вид. Обратите внимание, что вы можете использовать для необходимого вам элемента другое фоновое изображение меньшего размера, которое будет лучше подходить для определенного размера экрана. Для этих целей изменяйте значение CSS свойства background-image для вставки изображения в качестве фонового для конкретного элемента.

Подключение медиазапросов

В этом разделе мы с Вами рассмотрим как произвести подключение медиазапросов к таблице стилей. Самым распространенным вариантом подключения является внедрение медиазапроса в таблицу стилей с использованием CSS правила @media .

Ранее в этом учебнике мы уже рассматривали такие правила как @font-face , которое позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов», правило @keyframes , которое позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров (или точки) в процессе анимации, и правило @import, оно используется для импорта содержимого CSS файла в текущую таблицу стилей, мы о нем еще поговорим далее в статье.

Подключение медиазапросов с использованием правила @media

Правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Это правило имеет следующий синтаксис:

Давайте детально разберем из чего состоит синтаксис этого правила.

Логические операторы

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

Устройства (media type)

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

Мультимедийные функции (media functions)

Ниже представлен перечень основных мультимедийных функций, которые являются частью современного стандарта:

В настоящее время спецификации Media Queries Level 4 и Media Queries Level 5 включают некоторые улучшения синтаксиса и дополнительно вводят прочие мультимедийные функции, которые имеют ограниченную поддержку и возможно будут либо изменены, либо удалены к тому времени, когда они станут частью живого стандарта. По этой причине мы будем рассматривать в примерах лишь тот синтаксис и те функции, которые активно используются в настоящее время, к ним можно отнести такие как width , min-width , max-width , height , min-height и max-height .

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

Вы можете подключать различные стили для различных устройств, используя HTML тег (определяет связь между документом и внешним ресурсом) и его атрибута media:

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .

Подключение медиазапросов с использованием тега 2. Используя CSS правило @media внутри HTML тега

Обратите внимание, что при использовании атрибута media тега используется тот же синтаксис, что и при использовании правила @media .

Подключение медиазапросов с использованием правила @import

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4:

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4:

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):

Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and («И»), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

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

Обращаю Ваше внимание, что представленные значения не являются обязательными для использования, а представлены лишь с ознакомительной целью и служат отправной точкой в мир адаптивной верстки 😉

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот — при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

Подключить как внешний CSS файл к документу. Для этого достаточно прописать тег
в теге . Это наиболее распространенный способ подключения таблиц стилей к документу, когда внешнее оформление страниц выносится в отдельный внешний CSS файл.

Прописать стили в самом документе, используя тег

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.

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

Просто, не правда ли?

Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

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

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
   Пример использования !important:
2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
   В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

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

И т.д. по логической цепочке.

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

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

Часть 2. CSS свойства

Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook.

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Что лучше — общий всё-в-одном style.css или несколько файлов .css?

Несколько файлов удобней, но не снизит ли это скорость загрузки и рендеринга страниц?

• Вопрос задан более двух лет назад
• 2849 просмотров

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

Но даже сейчас лучше разделить стили блочной разметки от украшательств и грузить их раздельно. Подключать media queries CSS, не в CSS а в HTML отдельными файлами, указанием атрибута media:

А ещё лучше, подключать с каждой страницей только те стили, которые на ней используются 🙂

Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:

• Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
• Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
• Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
• Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент. У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.

5 нетривиальных моментов разработки фронтэнда на CSS

Ребята из Noveo нашли статью о некоторых аспектах использования CSS, на которые при верстке следует обратить особое внимание. После перевода материал был отдан на вычитку штатной верстальщице Светлане. Светлана нашла в статье несколько спорных пунктов, добавила комментарии и предложила свои варианты решений — предлагаем вам почитать интересную полемику двух фронтенд-разработчиков!

Фронтэнд-разработчик WebiNerds Евгений Половный охотно делится знаниями и опытом с коллегами, организуя тренинги и воркшопы, а также с читателями ГитХаба, публикуя часть своих материалов в книге на GitHub. WebiNerds адаптировали части этой книги для настоящей статьи.

Введение

Многие разработчики считают, что сделали достаточно, если что-то «работает». Я думаю, сегодня это одна из самых больших проблем в нашей индустрии. На своем последнем воркшопе я попытался обратить внимание на некоторые нюансы фронтенд-разработки, указать на проблемы, которые мы часто встречаем, работая с CSS.

Возьмем, например, флексбокс, представленный в CSS3. К сожалению, многие программисты, работающие во фронт-энд-разработке, не изучают флексбокс — или, по крайней мере, не делают это тщательно. Очень важно понимать разницу между флексбоксом и float-макетом, не только в общем, но и на глубоком уровне. Разработчики вполне могут написать какой-то работающий код (т.е. на экране визуально все нормально работает), не понимая, что происходит за фасадом — а следовало бы.

У CSS много нюансов. Рассмотрим 5 интересных моментов этой технологии, включая flexbox и float, на которые стоит обратить особое внимание.

Свойство CSS Float

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

Здесь мы должны приостановиться и рассмотреть термин «поток рендеринга». Этот термин может сбивать с толку. Что он на самом деле значит? Когда веб-страница загружается, наш браузер сначала загружает структуру Document Object Model (DOM). Затем, прежде чем отрисовать страницу, браузер должен найти блоки в DOM, соответствующие свойствам CSS в CSS файле (или файлах). Поток описывает порядок операций для механизма визуализации браузера. По сути поток — это то, как браузер решает, где каждый элемент будет размещен перед рендерингом. Только после того, как браузер все это сделает, сайт будет визуально отражен на экране.

Направление потока с выровненными элементами.

Трудность с CSS Float

В тот момент, когда строится HTML-страничка, обтекаемые элементы не распознают другие элементы в DOM (Document Object Model), за исключением текстовых элементов, таких как

или
. Происходит это потому, что обтекаемые элементы «выравниваются» — вдобавок к основным элементам — по границе родительского элемента. Из-за этого элементы со свойством CSS float не всегда ведут себя одинаково во всех контекстах. В частности, обтекаемый элемент может неожиданно отреагировать, когда он расположен рядом с нетекстовыми элементами, такими как блочные (

) или строчно-блочные элементы ( ), или рядом с

. Неожиданное поведение может возникать потому, что отображение обтекаемых элементов зависит от окружающих их объектов, и обтекаемые элементы «не видят» элементы нетекстовые .

Мы можем решить эту проблему, добавив элемент к DOM между других элементов:

Но как мы знаем, пустые и нефункциональные элементы в DOM – плохая практика.

Однако у этой проблемы есть простое решение. Мы можем добавить псевдо-класс, способствующий нормальному рендеринговому потоку. Когда этот псевдо-класс добавлен, элементы могут распознавать друг друга. Если кратко — псевдо-класс заставляет необтекаемые элементы реагировать на расположение обтекаемых элементов.

Есть и более элегантное решение. Мы просто добавляем отдельный класс для элементов, требующих очистки. Этот класс CSS устраняет необходимость нефункциональных элементов в DOM:

Светлана: Способов «зачистки» ( clearfix ) обтекаемых элементов было придумано довольно много, но как известно, чем меньше строчек, тем легче файл. Вот самый короткий вариант из всех существующих:

Этот способ зачистки будет работать во всех современных браузерах, поддерживающих псевдоэлементы (IE9+). Если требуется поддержка IE8, просто удалите одно двоеточие перед after. Подробное описание этого способа можно прочитать здесь: http://nicolasgallagher.com/micro-clearfix-hack/.

Свойство CSS Position

Свойство CSS position на самом деле довольно простое по сути. Однако нельзя забывать, что абсолютные и фиксированные элементы — как обтекаемые элементы — не участвуют в потоке рендеринга. При этом относительные и статично позиционированные элементы остаются в потоке рендеринга. По этой причине нам нужно крайне осознанно и внимательно использовать свойство position . Когда бы мы его ни использовали, мы должны понимать глубинный смысл того, что мы делаем.

Светлана: Автор безусловно прав в том, что относительно позиционированные элементы не влияют на основной поток. Однако здесь стоит внести ясность: в потоке резервируется место под элемент, как если бы к нему применялось свойство position: static . После этого элемент смещается на указанное расстояние (свойства top , bottom , left и right ). В своем новом месте обитания элемент уже не в потоке и может наслаиваться на другие элементы.

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

Распространенная ошибка при работе с position : попытка растянуть элемент с position: absolute до полной ширины страницы:

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

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

Светлана: Говоря про позиционирование элементов и их рендеринг относительно друг друга, очень важно упомянуть такой термин, как «контекст наложения» (stacking context). Это не самый простой термин из вокабуляра фронтендщика, но я попробую объяснить его на пальцах.

Контекст наложения тесно связан с понятием потока. Представьте себе нормальный поток рендеринга. Ко всем элементам применяется position: static (значение по умолчанию), никаких float’ов и других влияющих на поток свойств нет. В этом случае есть всего один контекст наложения, принадлежащий окну браузера. Именно по этой причине абсолютно позиционированный div в примере выше будет рассчитывать высоту и ширину от окна браузера, а не от тега html или body .

Теперь давайте создадим еще один контекст наложения. Свойств, которые за это отвечают, существует несколько: position (кроме static ), transform и даже opacity . Предлагаю использовать наиболее распространенный прием – добавим body свойство position: relative .

В результе создается новый контекст наложения относительно тега body . Т.е. теперь любой вложенный в body тег с position: absolute будет позиционироваться относительно body .

Очень важно переварить и усвоить эту идею. Этот прием частенько называют «позиционирование относительно родителя», и он бывает чрезвычайно полезен в ряде случаев, будь то центрирование или responsive-таблицы.

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

Контекст наложения влияет на абсолютно позиционированные блоки. Блоки с фиксированным позиционированием всегда будут располагаться и рассчитывать свои значения в % (например, высоту) относительно окна браузера.

Еще хотелось бы внести ясность в то, что значат значения свойств top , bottom , left и right . Казалось бы, все просто: это значения, говорящие браузеру, где отобразить блок. Это так, но… Рассмотрим пример: есть блок со значением top: 100px . Если у него позиционирование relative , то это будет означать, что браузер отрисует его на 100px ниже его первоначального отображения. При этом помним, что место под его первоначальное отображение резервируется.

Теперь изменим позиционирование на абсолютное. Как уже знаем из примеров выше, новое положение будет рассчитываться от границ контекста наложения. Т.е. на 100px ниже верхней границы окна браузера, при этом его горизонтальное смещение может интерпретироваться по-разному разными браузерами. Чтобы создать кроссбраузерную картинку, лучше всегда задавать не только top или bottom , но еще и left или right .

Вместо окна браузера отсчет может происходить от блока с новым контекстом.

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

На блоки с позиционированием static значения свойств top , left и т.п. не влияют. Т.е. браузер их просто проигнорирует. Советую это запомнить, т.к. весьма удобно «сбрасывать позиционирование» в отдельных медиазапросах, используя position: static .

Свойство флексбокс (Flexible Boxes)

Флексбокс новее, чем свойства float и position . Он был разработан для того, чтобы предложить другой способ расположения элементов, и основан на другом образе мышления. Флексбокс предлагает больше возможностей позиционирования и возможностей определять отношения между элементами, чем свойства float и position — потому что флексбокс позволяет вам располагать элементы относительно друг друга. Это важно. С float и position элементы располагаются относительно страницы. С флексбоксом элементы соотносятся только между собой.

Это открывает перед нами много восхитительных возможностей. Например, мы можем поменять расположение элемента, меняя его порядковый номер только в CSS. Таким способом элементы легко подвинуть или поменять местами. Трудность с флексбоксом в том, чтобы понять, КАК и ПОЧЕМУ он работает именно таким образом. Это новая парадигма, которая, соответственно, требует нового образа мышления. Для начинающих разработчиков, только вступающих на этот путь, это может не быть такой уж большой проблемой. Но разработчикам-ветеранам нужно научиться думать так же, как флексбокс. В наши дни это обязательный скилл для всех разработчиков.

Светлана: Ключевое отличие стандартных сеток на флексах от сеток на float’ах (например, bootstrap) заключается в том, что для флексов нет необходимости создавать обертку ( > в bootstrap), группирующую колонки. При помощи свойства flex-wrap (которое, кстати, есть только в 2 из 3 синтаксисов флексбокса) колонки сетки могут переходить на «новую строку», если для них недостаточно места на текущей. При этом не требуется применять clearfix , а следовательно, отпадает необходимость в дополнительной разметке. Поскольку поддержка этой возможности все еще не достаточно хорошая (IE10+, Android 4.4+), нужно думать о полифиле. К сожалению, на момент написания этих строк универсального полифила для всех фич флексбокса еще не придумали. Существующие решения либо не готовы к продакшену по причине большого количества багов, либо работают хорошо, но требуют серьезной оптимизации (создают ощутимые задержки при отрисовке страницы). Но мы можем с уверенностью применять в качестве полифила сетку «на инлайн-блоках» ( display: inline-block ). Такая сетка тоже не требует дополнительной разметки, а колонки переходят на новую строку, если не помещаются на текущей.

Трудности флексбокса

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

Из-за проблем с поддержкой браузеров (в старых версиях браузеров) возможность использовать флексбокс в проекте зависит от потребностей клиента. Если заказчик настаивает на поддержке старых браузеров, о флексбоксе не может быть и речи. Если же заказчик ориентируется на современные браузеры, я однозначно использую флексбокс.

Светлана: Этот момент, на мой взгляд, спорный. Можно полифилить большую часть случаев, для которых применяется флексбокс, даже для IE8+.

Также есть очень полезный SASS-миксин для обеспечения оптимальной кроссбраузерной поддержки:

Разные типы верстки: адаптивная vs отзывчивая

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

Адаптивные макеты, в свою очередь, предлагают макеты сайта, полностью различные в зависимости от девайсов. Другими словами, мобильная версия сайта может содержать элементы (и даже функциональность), которые не представлены в десктопной версии. Версия сайта, которую посетители видят на планшетах, также может полностью отличаться как от мобильной, так и от десктопной версий. Даже для десктопа вы можете предложить HD-версии сайта или же версии низкого разрешения, в зависимости от экрана, на котором просматривается сайт.

Почти каждый современный вебсайт использует смесь адаптивной и отзывчивой верстки. Возьмите, например, TechCrunch:

Обратите внимание, как рубрика «Избранные новости» (Featured Stories) размещается справа от рубрики «Смотреть репортаж Crunch» («Watch Now Crunch Report»), когда окно на рабочем столе широкое, но затем перемещается вниз, когда окно сужается. Это «отзывчивая» верстка. Однако там происходит намного больше. Обратите внимание, как изменяется весь заголовок, когда окно уменьшается в размерах. В версии, оптимизированной для мобильных девайсов, у нас есть только меню «гамбургер», логотип TechCrunch и иконка космического корабля (при клике на которую разворачивается лист топ-историй):

В десктопной версии сайта у нас абсолютно другой заголовок:

Элементы не просто перераспределены, чтобы вместиться в подходящую для мобилок версию. То, что мы видим — два абсолютно разных макета, две абсолютно разные версии интерфейса.

Мы можем делать адаптивные макеты в CSS с помощью медиа-запросов:

Медиа-запросы позволяют нам уточнить критерии, определяющие, какую версию сайта отображать. В большинстве случаев эти критерии являются параметрами разрешения экрана. Иногда мы можем использовать DPI (Dots Per Inch, буквально – «Количество точек на дюйм», измеряющее плотность пикселей на экране) чтобы определить, какую версию показать. Дополнительно мы можем использовать медиа-запросы и попытаться определить, сенсорный девайс или нет. Для нацеливания на продукты Apple особенно полезен ресурс stephen.io, поддерживаемый Стефеном Гилбертом (Stephen Gilbert). Stephen.io перечисляет медиа-запросы к мобильным девайсам Apple, делая максимально простым определение конкретной модели iPhone или (еще лучше) ВСЕХ моделей iPad с помощью всего одного медиа-запроса:

Сложность с адаптивным дизайном

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

Светлана: Веб-технологии меняются стремительно: меняется стандарт, разработчики со всего мира придумывают различные приемы, улучшающие интерфейсы и упрощающие разработку. Далеко не все термины, которыми пользуются фронтендщики, можно найти в спецификациях. В связи с этим у новичков и даже у опытных разработчиков часто возникает вопрос «а чем отзывчивый макет отличается от адаптивного или резинового?». Сейчас я немного побуду занудой. Термины не просто так становятся общеупотребимыми. Их таковыми делают книги и статьи выдающихся разработчиков. Так вот, четкие различия между этими типами макетов можно посмотреть на liquidapsive.com. Примеры на этом сайте не противоречат тому, как Итан Маркотт (Ethan Marcotte) определяет отзывчивые макеты в своих книгах и статьях (послуживших основой современному тренду), или тому, какая идея была в основе первых адаптивных макетов в далеком 2006-м. Это полезно знать, однако термины невозможно заморозить. И сейчас, особенно среди русскоязычных разработчиков, «адаптивный» и «отзывчивый» стали почти синонимами.

Адаптивные CSS-фреймворки

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

Создание сетки с различными значениями ширины для различных размеров экрана во фреймворке Foundation.

Полноценные фреймворки, такие как Bootstrap и Foundation, представляют собой больше, чем просто систему сеток. Они также предоставляют JavaScript-плагины, правила CSS и элементы дизайна. В последнее время я работаю практически исключительно на Foundation. Не потому, что Bootstrap способен на меньшее, скорее потому, что Bootstrap предлагает так много опций для визуальной адаптации, что нам просто не нужно столько для наших проектов. За счет дополнительной функциональности Bootstrap шире. Bootstrap отличный, особенно если у вас в команде нет дизайнера и вы хотите использовать все встроенные элементы дизайна. Как бы то ни было, мне обычно просто нужны функциональные элементы CSS-фреймворка, а не элементы дизайна.

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

Хотя существуют и другие фреймворки, Bootstrap и Foundation могут удовлетворить практически 100% потребностей разработки. И, к счастью, довольно просто выучить оба этих фреймворка. Оба хорошо задокументированы и имеют большое сообщество активных пользователей, которые могут помочь и ответить на вопросы.

За CSS-фреймворками — будущее. Если вы пока не используете какой-нибудь из них, стоит серьезно задуматься над тем, чтобы приобщиться!

Выводы

Сейчас — увлекательное время для CSS и фронтенд-разработки. Благодаря (относительно) новым инструментам, таким как свойство флексбокс, и CSS-фреймворкам, способствующим нашему адаптивному (и отзывчивому) дизайну, сейчас создать и успешно запустить комплексные сайты просто, как никогда.

Антигерой CSS-разметки — свойство «display: table»

Восстановление подмоченной репутации CSS-таблиц

Антигерой — один из центральных персонажей фильма, книги или пьесы, не обладающий обычными героическими качествами.

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

Импульс от давнего начала движения против использования HTML-таблиц был силен. Он оказал влияние на многие поколения разработчиков, заставив их думать, что любое использование таблиц — зло.

Надо признаться, я один из тех разработчиков, кто избегает табличной вёрстки даже для представления табличных данных. Мало того, я даже упрекал своих коллег, когда они использовали display: table для колоночной разметки (или разметки «Holy Grail»).

Оглядываясь назад, я понимаю, что с упрямством, достойным лучшего применения, тратил огромное количество времени на то, чтобы «заточить» CSS под нужную мне задачу.

Два типа табличной разметки

Использовать таблицы в вёрстке можно двумя способами: это HTML-таблица и CSS-таблица.

HTML-таблица — это когда для создания таблицы используется нативный HTML-тег

, а CSS-таблица — это имитация того же поведения, но с помощью CSS-свойств.

Есть ключевое различие

Как и те, кто учился по «CSS Zen Garden», я испытываю отвращение к табличной вёрстке в HTML. Сам того не понимая, я позволял обманчивым предубеждениям ввести себя в заблуждение, преувеличивая взаимосвязь между HTML- и CSS-таблицами.

Если нечто выглядит, работает и ведёт себя как таблица, то оно ведь должно быть таблицей? Неправильно!

На самом деле, у CSS-таблиц есть одно ключевое отличие от HTML-таблиц: они могут перестать быть таблицами, стоит только изменить их CSS-свойства. А HTML-таблицы на такое не способны. Это открывает перед нами широкие возможности выборочного использования в вёрстке нужных табличных особенностей.

Ниже вы найдёте несколько примеров использования display: table :

Динамическое вертикальное выравнивание по центру

Нажимайте на кнопку, чтобы добавить строчки.

Это, пожалуй, самый распространённый способ использования display: table . С его помощью можно получить истинное выравнивание по вертикали элементов с динамической высотой.

Есть также другой, более короткий, способ вертикального выравнивания, который может вас заинтересовать:

Динамическое горизонтальное выравнивание по центру

Чтобы горизонтально расположить по центру динамический элемент, можно сделать его блочно-строчным ( display: inline-block ). Затем внешнему контейнеру этого элемента нужно задать свойство text-align: center . Недостаток этого способа состоит в «побочном эффекте» выравнивания текста по центру. Все дочерние элементы внутри контейнера унаследуют свойство text-align: center , которое может переопределить существующие свойства.

Благодаря @mojtabaseyedi я нашёл новый способ выравнивать динамические элементы по горизонтали без побочных эффектов. Нужно применить к динамическому элементу display: table и margin: auto .

Адаптивная вёрстка

Уменьшите окно до , чтобы увидеть адаптивность в действии.

Как я уже упоминал, CSS-таблица может вести себя не как таблица, когда это необходимо. Переключив у элемента свойство display с table-cell на block , мы сможем расположить элементы в стопку.

Порядок следования меняется с 1-2-3 на 2-3-1

Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.

Динамический прилипающий подвал

Прилипающий подвал должен соответствовать двум требованиям:

1. Подвал должен прилипать к низу страницы, когда основного контента слишком мало, чтобы заполнить всю страницу по высоте.
2. Подвал должен следовать в потоке как обычно, если объём контента превышает высоту страницы.

Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.

Эти решения отлично работают, но у них есть один недостаток: подвал должен быть фиксированной высоты. Эту проблему можно обойти средствами JavaScript, но я всё же предпочитаю использовать для этого CSS. С помощью display: table можно сделать прилипающий подвал с динамической высотой.

Разметка «Holy Grail»

Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.

Разметка «Holy Grail»

Такая разметка должна по мере возможности удовлетворять следующим требованиям:

1. Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
2. Центральная колонка может идти первой в разметке.
3. Любая колонка может быть больше остальных по высоте.

Разметка «Holy Grail» с помощью display: table

В примере выше показана разметка «Holy Grail». Можете менять размеры окна, чтобы средняя колонка тянулась по ширине; также можно добавить контент, чтобы посмотреть, как работает прилипающий подвал. Единственное требование, которому эта разметка не соответствует, — это пункт 2: «Центральная колонка может идти первой в разметке».

Наверно, это нужно для поисковой оптимизации. То есть если соображения SEO для вас не стоят на первом месте, с помощью display: table вы сравнительно легко сделаете разметку «Holy Grail».

Вы шутите? Flexbox всё решит!

Это действительно так. Ознакомьтесь, например, с решением вышеприведённых задач с помощью flexbox от Phillip Walton. Однако, я бы не торопился его применять. На долю IE8 и IE9 до сих пор приходится 32% рынка десктопных браузеров — а это слишком много пользователей, чтобы отказываться от них ради удовольствия применить flexbox. Если только ваш сайт не рассчитан целиком на мобильный трафик — в чём я сильно сомневаюсь, — стоит выбрать display: table .

Уточнение: Я работаю на консалтинговую компанию, поэтому заинтересован в поддержке десктопов. Но если вам нужно поддерживать только мобильные браузеры, можете смело использовать flexbox.

Заключение

Надеюсь, с помощью приведённых примеров мне удалось продемонстрировать полезные свойства несправедливо пренебрегаемого display: table . Однако должен подчеркнуть, что CSS-таблицы — не панацея для разметки. Используйте их уместно, это позволит вам избежать длительных ночей правки CSS-кода.

CSS-разметка — применение outline вместо border

February 21, 2014

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

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

Во время создания разметки можно визуально обозначить местоположение всех ее частей.

Например, таким образом:

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

Вот что я имею ввиду: предположим, у вас есть три колонки ‘ов, которые должны располагаться внутри контейнера-родителя с шириной 960px. (Если вам не нравятся пиксели, то можете применить для этой же цели , проценты или любую другую единицу измерения).

Для всех трех ‘ов-потомков устанавливаем правила и попытаемся визуально обозначить местоположение в разметке каждого из блоков.

Если ко всем трем блокам вы добавите свойство , то последний из этих трех опустится вниз и расположиться под двумя первыми:

Это произошло потому, что каждый из трех блоков имеет ширину 320px; помимо этого справа и слева к каждому блоку добавлена граница толщиной в , что делает ширину блока равной, как минимум, .

Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера — сместить последний блок вниз!

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

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

Сразу становится ясно преимущество использования при создании разметки. Если в процессе ее создания вам кажется, что что-то идет не так, вы легко можете “нарисовать” границы интересующего вас элемента, не опасаясь при этом нарушить разметку.

Другое отличие от заключается в том, что “рисуется” обязательно вокруг всего элемента, по всем четырем его сторонам.

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

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

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

Если элемент также имеет , то эти поля рисуются вокруг границ ; но при этом не изменяют поля и не замещают их.

Автор статьи: Eric Meyer — “Smashing CSS Professional Techniques for Modern Layout”

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

index.html подключает `styles.less` вместо `styles.css`

почему у меня сменилось styles.css на styles.less ( недел. назад было все на css?) Код правила в нетбинсе, он автоматически перекомпилирует less файлы в css файлы. Файл index.html подключает только css файлы. Как исправить?

Так не бывает, скиншот прилагаю, неделю назад все было на css.

UPD: Вот так я делаю в нетбинсе. Сначала делаю верстку. Заходим в свойства пректа, выбираем предпроцессоры СSS->Далее по цепочке (см. скриншот). Когда у меня папка /www/css перекомпилирутся, я ее копирую и вставляю в проект.(но там у меня подключается к несуществующему /src/less/). Раньше я работала точно также, и у меня всегда подключались css файлы и верстке, и в проекте.

Кодинг

Как повысить производительность сайта с помощью Google Pagespeed принципы работы сервиса

Читать далее

Кодинг

Яндекс Деньги — как пройти регистрацию, создать и пользоваться кошельком, как снять, положить или

Читать далее

Кодинг

Применение LESS на практике популярные программы для компиляции в CSS

Читать далее

Кодинг

Представитель Google рассказал о применяемых способах дублирования контента

Читать далее

Кодинг

Правила верстки сайтов

Читать далее

Кодинг

Почему не стоит начинать с меню таксономии Drupal 7

Читать далее

Кодинг

Постраничная навигация с использованием AJAX и jQuery. Часть 1

Читать далее

Кодинг

Пометка Часто бываете в поиске Яндекса — что это и как работает

Читать далее

Кодинг

Политика конфиденциальности

Читать далее

Кодинг

Поисковая система от Майла — история развития и особенности продвижения сайта под поисковик майл.ру

Читать далее

Кодинг

Подсветка кода и кнопки форматирования комментариев в WordPress — SyntaxHighlighter и Comment Form

Читать далее

Кодинг

Площадки РСЯ список запрещённых, настройка, таргетинг на сайты

Читать далее

Кодинг

Плагин ленты новостей WordPress

Читать далее

Кодинг

Как пользоваться Webpack 4, чтобы не перезагружать браузер в процессе разработки приложения

Читать далее

Кодинг

Как получить данные $category_id в wordpress

Читать далее

Кодинг

Как подобрать правильный набор CSS инструментов и фреймворки

Читать далее

Кодинг

Serpstat — обзор инструментов ‘Мониторинг позиций’, ‘Кластеризация’ и ‘Текстовая аналитика’

Читать далее

Кодинг

Как перенести OpenCart на другой хостинг

Читать далее

Кодинг

Как отслеживать доходы и убытки в криптопортфеле обзор GQ Blog

Читать далее

Кодинг

Как осуществляется оплата через Apple Pay с помощью Payment Request API способы платежей

Читать далее

Кодинг

Как определить уровень чернил в картриджах принтера

Читать далее

Кодинг

Как обновить статический Html сайт до динамического на Joomla

Читать далее

Кодинг

Как натянуть верстку на Yii2. Часть 2

Читать далее

Кодинг

Yoast SEO лучший сео плагин 2020 года

Читать далее

Кодинг

Yii2 behaviors описание

Читать далее

Кодинг

WordPress.com купил новый домен верхнего уровня

Читать далее

Кодинг

WordPress — привлекательная галерея за 5 минут

Читать далее

Кодинг

Web-дизайн и web-разработка как правильно выбрать курсы и программы обучения

Читать далее

Кодинг

Vue js scroll функция бесконечной прокрутки страницы, примеры реализации

Читать далее

Кодинг

ukit обзор конструктра сайтов, как пользоваться, что может

Читать далее

Кодинг

TikTok проводит тестирование нативных видеообъявлений

Читать далее

Кодинг

Styled components CSS преимущества и недостатки использования стилизованных компонентов

Читать далее

Добавить комментарий

Нажмите, чтобы отменить ответ.

Добавить комментарий