Префикс — можно перевести как «приставка».

Если посмотреть на стили какого-нибудь сайта, можно столкнуться со свойствами, содержащими впереди непонятные слова: -webkit, -moz, -ms.

Эти слова являются префиксами следующих браузеров:

-webkit-: браузеры Chrome, Safari, Opera;
-moz-: браузер Mozilla Firefox;
-ms-: браузер Internet Explorer.

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

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

Префиксы могут быть как у свойств, так и у значений:

display: -ms-grid;
display: grid;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Упоминание префикса говорит о том, в каком браузерном движке оно будет применено: webkit, gecko(-moz), trident(-ms).

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

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

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

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

#неглупые_вопросы

В этой статье разбираемся, как ставить пустые ссылки.

Есть несколько способов указывать пустые ссылки. Рассмотрим, чем грозит использование того или иного способа.

https://tml.io/plyoh

Вы вбили запрос в адресной строке и нажали Enter, что дальше?

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

Публикация основана на переводе репозитория «What happens when…» Филлипа Джеймса.

https://tml.io/xe2e1

Рассказываем про навык «Экспорт параметров и графики из Figma».

Зачем нужен:
Многие дизайнеры сейчас используют именно Figma для работы над проектами, поэтому верстальщику важно уметь работать с этим редактором. Верстальщик получает макет и самостоятельно открывает его в браузере или же в графическом редакторе, извлекает информацию и графику, полученные параметры прописывает в HTML и CSS. Без этого умения готовую вёрстку просто не сделать.

Что входит в полный комплект:
— Методика.
— 2 кейса лёгкого уровня.
— 2 кейса среднего уровня.
— 2 кейса сложного уровня.
— Дополнительная теория.

Подробнее здесь — https://tml.io/kyx4k

История нашего выпускника Сергея Шершнёва.

Несколько лет назад Сергей бросил работу маркетолога и ушёл в веб-разработку. Пройдя курсы HTML Academy и набравшись опыта, он понял, что теперь сам готов преподавать. Сегодня Сергей наставничает на шести курсах HTML Academy и получает от студентов самые высокие оценки.

Прочитать полностью

В США сегодня празднуется день «Смейся и богатей», а у нас стартует розыгрыш навыков.

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

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

Подписаться на рассылку и принять участие в розыгрыше

Отзыв выпускника курса «HTML и CSS. Адаптивная вёрстка и автоматизация» #21 Артура Ткаченко.

В целом, очень достойный курс. Но полному новичку необходимо всё же сначала пройти курс «Профессиональная вёрстка», или хотя бы иметь какой-то опыт вёрстки; чтобы такие слова как «флексбокс», «сетки», «векторная графика» и многие другие не были для него чем-то новым, иначе будет сложновато. Этот курс рассчитан, скажем так, уже на подготовленного бойца.

Читать полностью 👇

https://telegra.ph/Otzyv-vypusknika-kursa-HTML-i-CSS-Adaptivnaya-vyorstka-i-avtomatizaciya-21-Artura-Tkachenko-02-09

Как подключить и оптимизировать нестандартные шрифты?

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

Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.

Подробнее об этом в статье 👇
https://tml.io/3swlh

Где новичку набраться опыта, рассказываем про Акселератор.

При поиске работы шансы получить хорошую должность увеличиваются, если у вас есть опыт. Работодатель охотнее возьмёт того, кто не только знает теорию, но и уже выполнял реальные задачи. Поэтому при обучении студентов HTML Academy отводит особую роль практике, ведь нам важно подготовить людей к реальной разработке по максимуму. Так, освоение профессий «Фронтенд-разработчик» и «React-разработчик» делится на два этапа: обучение и производство.

Подробнее в статье

Важная информация про лайв «Что ждать от тестового задания фронтенд-разработчика».

По техническим причинам перенесли лайв, который должен был проходить сегодня в 13:00.
Новые дата и время проведения — 18 февраля в 16:00.

Чтобы рассмотреть тему глубже, мы позвали в гости фронтенд-разработчика NKH Studio — Витольда Демишкевича. Он лично принимает участие в найме фронтендеров и поделится взглядом компании на поиск разработчиков. В качестве ведущего выступит Серёжа Попов — руководитель аутсорс-продакшена «Лига А.».

Спасибо за понимание. Хорошего дня! До встречи на лайве!

Записаться на лайв

Стоит ли делать слайдеры на CSS?

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

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

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

Совет:
НИКОГДА не делайте слайдеры на реальных проектах с помощью CSS. Да, вы это можете сделать, но посмотрите, как много минусов вы получите, попросту говоря, выстрелите себе в колено.

— Чтобы добавить новый слайд, нужно дописать ещё немного CSS-стилей. Каждое изменение количества слайдов влечёт за собой изменение стилей.

— Сделать некоторые дополнительные задачи становится невозможно, например, бесконечную прокрутку.

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

Из этого следует правило: пишите логику с помощью языка программирования, например, JavaScript. И это касается не только слайдеров, но и табов, попапов. Разделяйте ответственность правильно: HTML — контент, CSS — стили, JavaScript — логика.

#неглупые_вопросы

В понедельник, 15 февраля, в 16:00 по московскому времени в нашем Инстаграм аккаунте — https://tml.io/9rr1f, пройдёт лайв, на котором мы разыграем профессиональный навык.

О чём лайв:
Как продуктивно и эффективно учиться? Как перестать прокрастинировать и взяться за дело? На эти и многие другие вопросы ответим в прямом эфире.

Поможет разобраться с темой наставница HTML Academy — Ольга Вадясова.

Ведущий лайва — Роман Ивойлов, продюсер мероприятий в HTML Academy.

Как участвовать в конкурсе:
Коротко расскажите, что вас мотивирует учиться и работать? Поделитесь в комментариях своим источником вдохновения.

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

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

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

Когда итоги:
Во время лайва в прямом эфире выберем случайного победителя.

Ссылка на пост — https://tml.io/9rr1f

Успейте купить навыки по старой цене.

С 19 февраля цена на все профессиональные навыки увеличится. До этого дня их можно купить по старым ценам.

https://tml.io/oz9c3

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