☑️ КНИГИ ДЛЯ НАЧИНАЮЩИХ И НЕ ТОЛЬКО
На вопрос стоит, ли учится по книгам веб разработке, да и программированию в целом нет однозначного ответа. Некоторые технологии изменяются/развиваются очень быстро так что по ним не успевают выпустить актуальную книгу, а другие стоят на месте по много лет.
Книг по программированию, и front-endу ,в том числе очень много. В начале обучения сложно выбрать актуальный и качественный материал, так как в интернете миллионы ресурсов/видео/самоучителей.
Делюсь книгами, которые помогли мне освоится в технологиях. Интересны они будут новичкам, людям уже что-то знающим, и даже работающим в этой сфере.
P.S.Все книги легко гуглятся в PDF или в веб формате.
📍Верстка
Начнем с HTML. Не стоит слишком много времени тратить на разбор всевозможных тегов, их вариаций и атрибутов. После стандартного “Hello Wolrd!” и разбора основных тегов можете смело переходить к изучению CSS. Для начала будет полезная книга
📚 “Новая большая книга CSS” Дэвид Макфарланд (зелено-белая с собачкой на обложке), желательно последнее издание.
Здесь рассматривается HTML в контексте CSS что даст вам сразу же комплексные знания об этих технологиях. В книге хорошие примеры и она просто читается.
Для тех кто чувствует себя уверенно в HTML+CSS рекомендую
📚 “Секреты CSS. Идеальные решения ежедневных задач” Леа Веру. Здесь описываются типичные решения популярных задач, хорошие и плохие подходы. Этих двух книг будет вполне достаточно, чтобы хорошо сверстать почти любой сложности блок.
📍JavaScript
Знакомство с этим языком по моему мнению лучше всего начать с книги
📚 “Выразительный JavaScript” Марейн Хавербек. Здесь рассматриваются основы программирования на JavaScript, а так же предлагаются задания в конце каждого раздела, которые помогут их закрепить.
Параллельно можно обратиться к книге
📚 Дэвида Флэнагана “JavaScript. Подробное руководство”. Эта книга больше похожа на спецификацию и читать ее очень сложно. Но она идеально подходит для разбора и более глубокого понимания тех вещей, которые описаны в предыдущей. После можно пройтись по паттернам:
📚 “68 способов эффективного использования js” Херман Дэвид и
📚 “JavaScript. Шаблоны” Стоян Стефанов. Книги описывают популярные подходы и решения типичных задач.
На вопрос стоит, ли учится по книгам веб разработке, да и программированию в целом нет однозначного ответа. Некоторые технологии изменяются/развиваются очень быстро так что по ним не успевают выпустить актуальную книгу, а другие стоят на месте по много лет.
Книг по программированию, и front-endу ,в том числе очень много. В начале обучения сложно выбрать актуальный и качественный материал, так как в интернете миллионы ресурсов/видео/самоучителей.
Делюсь книгами, которые помогли мне освоится в технологиях. Интересны они будут новичкам, людям уже что-то знающим, и даже работающим в этой сфере.
P.S.Все книги легко гуглятся в PDF или в веб формате.
📍Верстка
Начнем с HTML. Не стоит слишком много времени тратить на разбор всевозможных тегов, их вариаций и атрибутов. После стандартного “Hello Wolrd!” и разбора основных тегов можете смело переходить к изучению CSS. Для начала будет полезная книга
📚 “Новая большая книга CSS” Дэвид Макфарланд (зелено-белая с собачкой на обложке), желательно последнее издание.
Здесь рассматривается HTML в контексте CSS что даст вам сразу же комплексные знания об этих технологиях. В книге хорошие примеры и она просто читается.
Для тех кто чувствует себя уверенно в HTML+CSS рекомендую
📚 “Секреты CSS. Идеальные решения ежедневных задач” Леа Веру. Здесь описываются типичные решения популярных задач, хорошие и плохие подходы. Этих двух книг будет вполне достаточно, чтобы хорошо сверстать почти любой сложности блок.
📍JavaScript
Знакомство с этим языком по моему мнению лучше всего начать с книги
📚 “Выразительный JavaScript” Марейн Хавербек. Здесь рассматриваются основы программирования на JavaScript, а так же предлагаются задания в конце каждого раздела, которые помогут их закрепить.
Параллельно можно обратиться к книге
📚 Дэвида Флэнагана “JavaScript. Подробное руководство”. Эта книга больше похожа на спецификацию и читать ее очень сложно. Но она идеально подходит для разбора и более глубокого понимания тех вещей, которые описаны в предыдущей. После можно пройтись по паттернам:
📚 “68 способов эффективного использования js” Херман Дэвид и
📚 “JavaScript. Шаблоны” Стоян Стефанов. Книги описывают популярные подходы и решения типичных задач.
☑️ КАК НУЖНО ПИСАТЬ HTML
HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML(предыдущих версий) и XHTML(более строгий, но устаревший язык разметки). Он расширяет и улучшает разметку документов, а также добавляет единый API для сложных веб-приложений (видео, аудио и т д)
Самое приятное в HTML5 то, что браузер сам исправляет/дополняет код делая его валидным, да и сам язык довольно гибкий. Но, есть и негативный момент - разработчик никаким образом не извещается о проблемах с кодом, которые в свою очередь могут вызывать проблемы с дальнейшей разработкой/поддержкой/продвижением.
Посмотрите на этот кусок кода, является ли он валидным?
Код должен быть (касается не только HTML):
✔️ максимально линейным
✔️ читаемым
✔️ управляемым
✔️ коротким
✔️ самодокументируемым
Пишите не только валидный и понятный браузеру код, а и другим людям.
HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML(предыдущих версий) и XHTML(более строгий, но устаревший язык разметки). Он расширяет и улучшает разметку документов, а также добавляет единый API для сложных веб-приложений (видео, аудио и т д)
Самое приятное в HTML5 то, что браузер сам исправляет/дополняет код делая его валидным, да и сам язык довольно гибкий. Но, есть и негативный момент - разработчик никаким образом не извещается о проблемах с кодом, которые в свою очередь могут вызывать проблемы с дальнейшей разработкой/поддержкой/продвижением.
Посмотрите на этот кусок кода, является ли он валидным?
<!DOCTYPE html>95% разработчиков скажут, что код выше невалидный. Это не так, код полностью валиден (можете убедится сами проверив его на валидаторе
<html lang=en>
<head>
<title>HTML5</title>
<body>
<p title=question>Is this code valid?
https://validator.w3.org/). Но и хорошим таким код не назовешь. HTML5 очень лоялен к разработчику и дает ему слишком много свободы. Многие теги не требуют закрытия, значения атрибутов можно не заключать в "", использовать любой тип регистра.Код должен быть (касается не только HTML):
✔️ максимально линейным
✔️ читаемым
✔️ управляемым
✔️ коротким
✔️ самодокументируемым
Пишите не только валидный и понятный браузеру код, а и другим людям.
☑️ ПОЛЕЗНЫЕ УНИВЕРСАЛЬНЫЕ АТРИБУТЫ В HTML
Язык HTML – это язык разметки веб-страниц. С помощью тегов вы можете сообщить браузеру, какие элементы будут на этой странице. Но у элементов есть также их свойства и характеристики. Для этой цели в HTML используются так называемые атрибуты. Есть атрибуты которые все знают: id, class, name, type etc.
А есть редкие и не часто используемые, но не менее полезные:
🔻 contenteditable
Когда вы добавляете элементу атрибут contenteditable, браузер делает его доступным для редактирования. Кроме того, все потомки этого элемента также становятся доступны для редактирования. Основное преимущество contenteditable перед textarea и input в том, что можно вносить любой контент/html и он будет интерактивно отображен в поле ввода (а не просто в виде текста).
💬 Пример:
Facebook и VK для сообщений/записей на стене используют
🔻 hidden
Этот атрибут представляет собой выключатель, который определяет, отображать объект в окне браузера или нет. Им уже “помечены” теги <head> <script> <link>. Аналог в CSS { display: none; }
💬 Пример:
🔻 data-*
В HTML5 для любого элемента можно использовать собственные атрибуты, начинающиеся с префикса data-. Используется для хранения и быстрого доступа к данным в HTML (при взяимодействии с JavaScript), а также для оформления элементов через CSS (очень редко).
💬 Пример:
🔻 aria-*, role
Эти атрибуты оказывают влияние лишь на то, как страница представляется программами экранного доступа через речевой или тактильный вывод информации. Позволяют сделать вашу страницу более доступной, в некоторых случаях служат дополнением или заменой семантическим тегам.
💬 Пример:
🔻 download (на элементах управления)
При наличии данного атрибута браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки. В качестве значения можно указать рекомендуемое имя файла для сохранения на диск пользователя.
💬 Пример:
И последний - микроразметка
Относится больше к продвижению сайтов, а не разработке.
🔻 itemscope, itemtype, itemprop
Микроразметка — своего рода единый язык, который одинаково понимают и трактуют поисковые роботы Google, Яндекс, Bing, Yahoo и т д.
itemscope — описывает каждый блок отдельно, позволяет описать информацию на уровне сущности;
itemtype — указывает тип сущности;
itemprop — позволяет указать дополнительные свойства. Например, сущность — театральное событие. В таком случае можно указать название, дату спектакля, место проведения.
💬 Пример:
Язык HTML – это язык разметки веб-страниц. С помощью тегов вы можете сообщить браузеру, какие элементы будут на этой странице. Но у элементов есть также их свойства и характеристики. Для этой цели в HTML используются так называемые атрибуты. Есть атрибуты которые все знают: id, class, name, type etc.
А есть редкие и не часто используемые, но не менее полезные:
🔻 contenteditable
Когда вы добавляете элементу атрибут contenteditable, браузер делает его доступным для редактирования. Кроме того, все потомки этого элемента также становятся доступны для редактирования. Основное преимущество contenteditable перед textarea и input в том, что можно вносить любой контент/html и он будет интерактивно отображен в поле ввода (а не просто в виде текста).
💬 Пример:
Facebook и VK для сообщений/записей на стене используют
<div contenteditable=”true”></div>🔻 hidden
Этот атрибут представляет собой выключатель, который определяет, отображать объект в окне браузера или нет. Им уже “помечены” теги <head> <script> <link>. Аналог в CSS { display: none; }
💬 Пример:
<div hidden>Скрытый блок</div>🔻 data-*
В HTML5 для любого элемента можно использовать собственные атрибуты, начинающиеся с префикса data-. Используется для хранения и быстрого доступа к данным в HTML (при взяимодействии с JavaScript), а также для оформления элементов через CSS (очень редко).
💬 Пример:
<div data-user-id=”73612873”>Валидный блок с данными в атрибуте</div>🔻 aria-*, role
Эти атрибуты оказывают влияние лишь на то, как страница представляется программами экранного доступа через речевой или тактильный вывод информации. Позволяют сделать вашу страницу более доступной, в некоторых случаях служат дополнением или заменой семантическим тегам.
💬 Пример:
<aside role="complementary" aria-label="Реклама">
Рекламный блок
</aside>🔻 download (на элементах управления)
При наличии данного атрибута браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки. В качестве значения можно указать рекомендуемое имя файла для сохранения на диск пользователя.
💬 Пример:
<a href="image/xxx.jpg" download>Скачать файл</a>И последний - микроразметка
Относится больше к продвижению сайтов, а не разработке.
🔻 itemscope, itemtype, itemprop
Микроразметка — своего рода единый язык, который одинаково понимают и трактуют поисковые роботы Google, Яндекс, Bing, Yahoo и т д.
itemscope — описывает каждый блок отдельно, позволяет описать информацию на уровне сущности;
itemtype — указывает тип сущности;
itemprop — позволяет указать дополнительные свойства. Например, сущность — театральное событие. В таком случае можно указать название, дату спектакля, место проведения.
💬 Пример:
<div itemscope="" itemtype="TheaterEvent">
<span itemprop="name">Viva Штраус</span>
<div itemprop="location" itemscope="" itemtype="PerformingArtsTheater">
<meta itemprop="name" content=“site”/>
<link itemprop="sameAs" href=“sitehref”/>
<meta itemprop="address" content=“Киев, Украина"/>
</div>
<span itemprop="startDate" content="2016-25-12T19:00">Sun 25 December 2016 19:00</span>
</div>☑️ РАЗЛИЧИЕ МЕЖДУ АБСОЛЮТНЫМИ И ОТНОСИТЕЛЬНЫМИ ПУТЯМИ. В ФАЙЛОВОЙ СИСТЕМЕ И НА САЙТЕ.
Сайт существует как бы в двух измерениях. Реальном (локальном) и виртуальном (удаленном).
Для посетителей - это виртуальный веб-сервер. Который отличается, в числе прочего, тем, что на нем не существует файлов (за некоторыми исключениями). Если вы пишете
Для разработчика же сайт - это программа, выполняющаяся на совершенно конкретном реальном компьютере. С совершенно конкретным жестким диском, каталогами и файлами. разработчик работает именно с реальными файлами, на физическом диске.
Вот в этом различии и кроются трудности, с которыми часто сталкиваются новички. Теряют файлы, путают ссылки с файлами, обращаются к локальным файлам по протоколу HTTP, или подключают файлы от корня веб-сервера.
Для успешного и правильного использования путей нужно понимать 2️⃣ вещи:
📍 Различать корень веб-сервера, как его видит браузер, и корень файловой системы на диске.
📍 Отличать относительные путей от абсолютных
Сегодня мы разберем второй пункт:
🔻 Абсолютный путь — это путь от корневой папки к файлу. Другими словами - когда ссылка представляет из себя полный URL файла или страницы.
💬 При работе с внешними файлами используются такие обсолютные пути
В данном случае всё очень просто, мы указываем прямой путь к файлу, лежащему на другом домене. Возможно указание сокращенного пути через использование двух слешей в начале без явного указания http или https и сервер сам подставит нужный протокол.
💬 При работе с файлами на собственном веб сервере стоит использовать такую запись
В юникс-системах и на веб сайтах корень обозначается косой чертой - "/".
Это важно. Это не просто палочка, а самостоятельный адрес, путь.
Если в начале пути корень не указать, то этот путь будет относительным, и он достраивается от текущего положения. Дойти по такому пути можно только из конкретной точки.
🔻 Относительный путь к файлу от документа — это путь к файлу относительно текущего документа. Такой адрес зависит от расположения файла, в котором он записан.
💬 Самый простой пример относительного пути - это просто имя файла
💬 Некоторые системы требуют такой записи
❕И операционная система, и браузер, встретив относительный путь, достраивают его до абсолютного. но каждый - по-своему. Для предопределения приставки к относительному пути можно использовать тег
Попробуйте потренироваться в использовании относительных путей как на локальном компьютере, так и на веб-сервере. Понимание того, как это работает, непременно пригодится вам в любом проекте.
Сайт существует как бы в двух измерениях. Реальном (локальном) и виртуальном (удаленном).
Для посетителей - это виртуальный веб-сервер. Который отличается, в числе прочего, тем, что на нем не существует файлов (за некоторыми исключениями). Если вы пишете
http://site.com/file.html - это не файл. Это URI, виртуальный адрес. Файла с именем file.html на сервере может вообще не быть. Это все виртуальные адреса, а не файлы. И браузер работает именно с адресами.Для разработчика же сайт - это программа, выполняющаяся на совершенно конкретном реальном компьютере. С совершенно конкретным жестким диском, каталогами и файлами. разработчик работает именно с реальными файлами, на физическом диске.
Вот в этом различии и кроются трудности, с которыми часто сталкиваются новички. Теряют файлы, путают ссылки с файлами, обращаются к локальным файлам по протоколу HTTP, или подключают файлы от корня веб-сервера.
Для успешного и правильного использования путей нужно понимать 2️⃣ вещи:
📍 Различать корень веб-сервера, как его видит браузер, и корень файловой системы на диске.
📍 Отличать относительные путей от абсолютных
Сегодня мы разберем второй пункт:
🔻 Абсолютный путь — это путь от корневой папки к файлу. Другими словами - когда ссылка представляет из себя полный URL файла или страницы.
💬 При работе с внешними файлами используются такие обсолютные пути
<link href="https://site.com/css/style.css" rel="stylesheet">
<link href="//site.com/css/style.css" rel="stylesheet">В данном случае всё очень просто, мы указываем прямой путь к файлу, лежащему на другом домене. Возможно указание сокращенного пути через использование двух слешей в начале без явного указания http или https и сервер сам подставит нужный протокол.
💬 При работе с файлами на собственном веб сервере стоит использовать такую запись
<img srс=”/img/frame.gif”>В юникс-системах и на веб сайтах корень обозначается косой чертой - "/".
Это важно. Это не просто палочка, а самостоятельный адрес, путь.
Если в начале пути корень не указать, то этот путь будет относительным, и он достраивается от текущего положения. Дойти по такому пути можно только из конкретной точки.
🔻 Относительный путь к файлу от документа — это путь к файлу относительно текущего документа. Такой адрес зависит от расположения файла, в котором он записан.
💬 Самый простой пример относительного пути - это просто имя файла
<a href=”file.html”>
<img src=”../blog/main.html”>💬 Некоторые системы требуют такой записи
<a href=“./file.html”>
<img src=“./../blog/main.html”>❕И операционная система, и браузер, встретив относительный путь, достраивают его до абсолютного. но каждый - по-своему. Для предопределения приставки к относительному пути можно использовать тег
<base>. Он предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи. Браузер ищет тег <base>, определяет полный адрес документа. Например, если адрес документа указан как <base href="http://site.com/hzchd/">, то при добавлении рисунков достаточно использовать относительный адрес <img src="images/cat.gif">. При этом полный путь к изображению будет http://site.com/hzchd/images/cat.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая веб-страница.Попробуйте потренироваться в использовании относительных путей как на локальном компьютере, так и на веб-сервере. Понимание того, как это работает, непременно пригодится вам в любом проекте.
☑️ МАЛОИЗВЕСТНЫЕ CSS СЕЛЕКТОРЫ
Селекторы (от select) - это элементы каскадной таблицы стилей CSS, которые указывают на тот элемент на веб-странице, к которому должны будут применяться стили. Здесь будут выделены те селекторы, которые встречаются не часто, но могут быть полезны в некоторых ситуациях. В том числе присутствуют некоторые селекторы level 4, они здесь будут отдельно выделены(🔜). У них не очень хорошая поддержка браузерами, так как эта часть документации еще в драфтовом режиме, но в ближайшее время может быть утверждена. Перед их использованием убедитесь в поддержке вашим браузером!
⚡️:only-child
Этот применяется к дочернему элементу, только если он является единственным у родителя. Пригодится когда нужно прописать больший/меньший отступ/границу для тех элементов, которые содержат только один дочерний элемент, или же вы можете уменьшить размер шрифта если элемент содержит несколько дочерних элементов.
⚡️:target
Этот псевдо-класс позволяет связать гиперссылку
⚡️:empty
Псевдокласс представляет пустые элементы, которые не содержат дочерних элементов, текста или пробелов. К примеру,
⚡️:root
Находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент <html> и идентичен селектору по тегу html, но его специфичность выше.
⚡️:not(X)
Отрицательный CSS псевдо-класс, - функция, принимающая простой селектор X в качестве аргумента. Он находит элементы, не соответствующие селектору. X не должен содержать других отрицательных селекторов.
⚡️ :any 🔜
Селектор создан для того чтобы объединить несколько селекторов вместе, чтобы получить тот же самый эффект. Таким образом повышая читабельность вашего CSS-файла.
⚡️:has 🔜
Данный селектор позволяет указать, какие объекты должны присутствовать внутри указанного элемента, для того, чтобы это правило сработало по отношению к нему. Для примера, мы можем выбрать все секции, в которых присутствуют заголовки:
⚡️:any-link 🔜
Оно объявлено для соответствия любому из свойств :link или :visited.
⚡️:local-link 🔜
Этот элемент выбирает элементы, которые ссылаются на эту же страницу. Если ссылка включает в себя фрагмент настоящей ссылки, то она тоже подпадает под селектор. Если же нет, то фрагмент части ссылки настоящего URL не рассматривается.
⚡️:dir(ltr | rtl) 🔜
Cопоставляет элементы в зависимости от направления содержащегося в них текста. Может быть полезен при работе над приложением с поддержкой восточных языков (Арабский, Турецкий и т д)
ltr - текст слева направо
rtl - текст справа налево
Селекторы (от select) - это элементы каскадной таблицы стилей CSS, которые указывают на тот элемент на веб-странице, к которому должны будут применяться стили. Здесь будут выделены те селекторы, которые встречаются не часто, но могут быть полезны в некоторых ситуациях. В том числе присутствуют некоторые селекторы level 4, они здесь будут отдельно выделены(🔜). У них не очень хорошая поддержка браузерами, так как эта часть документации еще в драфтовом режиме, но в ближайшее время может быть утверждена. Перед их использованием убедитесь в поддержке вашим браузером!
⚡️:only-child
Этот применяется к дочернему элементу, только если он является единственным у родителя. Пригодится когда нужно прописать больший/меньший отступ/границу для тех элементов, которые содержат только один дочерний элемент, или же вы можете уменьшить размер шрифта если элемент содержит несколько дочерних элементов.
⚡️:target
Этот псевдо-класс позволяет связать гиперссылку
<a> с любым элементом на странице, при этом значение атрибута href ссылки должно начинаться с символа # и содержать идентификатор id выбранного элемента (якорь). При нажатии на ссылку с идентификатором якоря, псевдо-класс :target применяет заданный стиль к элементу с якорем. То есть, когда мы кликаем по ссылке, в адресе которой содержится фрагмент идентификатора элемента, этот элемент становится целью (отсюда и :target).⚡️:empty
Псевдокласс представляет пустые элементы, которые не содержат дочерних элементов, текста или пробелов. К примеру,
<p></p> является пустым элементом, а <p> </p>, <p> </p> или <p>тест</p> уже нет.⚡️:root
Находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент <html> и идентичен селектору по тегу html, но его специфичность выше.
⚡️:not(X)
Отрицательный CSS псевдо-класс, - функция, принимающая простой селектор X в качестве аргумента. Он находит элементы, не соответствующие селектору. X не должен содержать других отрицательных селекторов.
⚡️ :any 🔜
Селектор создан для того чтобы объединить несколько селекторов вместе, чтобы получить тот же самый эффект. Таким образом повышая читабельность вашего CSS-файла.
:any(section, article, aside)
:any(li, nav, header, footer) a {
color: #000;
}⚡️:has 🔜
Данный селектор позволяет указать, какие объекты должны присутствовать внутри указанного элемента, для того, чтобы это правило сработало по отношению к нему. Для примера, мы можем выбрать все секции, в которых присутствуют заголовки:
section:has(h1, h2, h3, h4, h5, h6)⚡️:any-link 🔜
Оно объявлено для соответствия любому из свойств :link или :visited.
a:any-link { ... } - то же самое что иa:link, a:visited { ... }⚡️:local-link 🔜
Этот элемент выбирает элементы, которые ссылаются на эту же страницу. Если ссылка включает в себя фрагмент настоящей ссылки, то она тоже подпадает под селектор. Если же нет, то фрагмент части ссылки настоящего URL не рассматривается.
⚡️:dir(ltr | rtl) 🔜
Cопоставляет элементы в зависимости от направления содержащегося в них текста. Может быть полезен при работе над приложением с поддержкой восточных языков (Арабский, Турецкий и т д)
ltr - текст слева направо
rtl - текст справа налево
Что вам наиболее интересно?
Final Results
38%
технологии HTML/CSS/JS, интересные моменты, неочевидные вещи, полезные советы
8%
материаллы (ссылки на полезные ресурсы, книги, видео и т д)
30%
первая работа и собеседования (вопросы, задачи, тестовые задания, как готовиться)
24%
код ревью (примеры хорошего/плохого кода с объяснениями)
☑️ CSS СВОЙСТВО currentColor
💬 Посмотрите на этот CSS код:
Кажется что чего-то не хватает. Мы опустили значения border-color и не указали цвет тени, значит ли это, что наш код не будет работать?
На самом деле - нет. Этот код полностью рабочий и правильный - и дело здесь в такой штуке как currentColor.
Ключевое слово currentColor похоже на переменную CSS с некоторыми отличиями: вы можете использовать currentColor только в тех свойствах, которые требуют цвет в качестве значения, а если свойство не принимает цвет в качестве значения, оно не будет работать с currentColor.
💬 В примере выше можно явно указать это свойство:
Другими словами: ключевое слово currentColor позволяет в свойствах элементов наследовать значение свойства color.
Есть свойства и элементы, которые наследуют значение color по умолчанию:
📍Цвет границы
📍Цвет границы элемента <hr>
📍Значение свойства box-shadow
📍Цвет текста элемента
📍Значение свойства outline
📍Цвет маркеров и границы элементов списка
📍Цвет атрибута alt элемента img.
Есть ряд случаев, когда может пригодиться получение значения свойства color. Один из примеров, когда значение свойства color не наследуется по умолчанию — это градиенты. Линейный и радиальный градиенты CSS не наследуют свойство color.
💬 С помощью currentColor вы можете создать градиент, использующий основной цвет темы:
💬 Также свойство currentColor можно очень эффективно использовать на псевдо-элементах ::before & ::after
Вооружившись этим свойством мы очень просто можем изменять тему определенных блоков или даже всей страницы.
💬 Код из картинки в приложении с использованием данного свойства может выглядеть так (ссылка на скриншот https://i.ibb.co/DPXX1Bg/Screen-Shot-2019-04-18-at-12-26-33-PM.png):
💬 Посмотрите на этот CSS код:
.test {
color: red;
border: 5px solid;
box-shadow: 0 0 5px 5px;
height: 50px;
}Кажется что чего-то не хватает. Мы опустили значения border-color и не указали цвет тени, значит ли это, что наш код не будет работать?
На самом деле - нет. Этот код полностью рабочий и правильный - и дело здесь в такой штуке как currentColor.
Ключевое слово currentColor похоже на переменную CSS с некоторыми отличиями: вы можете использовать currentColor только в тех свойствах, которые требуют цвет в качестве значения, а если свойство не принимает цвет в качестве значения, оно не будет работать с currentColor.
💬 В примере выше можно явно указать это свойство:
.test {
color: red;
border: 5px solid currentColor;
box-shadow: 0 0 5px 5px currentColor;
height: 50px;
}Другими словами: ключевое слово currentColor позволяет в свойствах элементов наследовать значение свойства color.
Есть свойства и элементы, которые наследуют значение color по умолчанию:
📍Цвет границы
📍Цвет границы элемента <hr>
📍Значение свойства box-shadow
📍Цвет текста элемента
📍Значение свойства outline
📍Цвет маркеров и границы элементов списка
📍Цвет атрибута alt элемента img.
Есть ряд случаев, когда может пригодиться получение значения свойства color. Один из примеров, когда значение свойства color не наследуется по умолчанию — это градиенты. Линейный и радиальный градиенты CSS не наследуют свойство color.
💬 С помощью currentColor вы можете создать градиент, использующий основной цвет темы:
background-image: linear-gradient(to bottom, currentColor, #fff);💬 Также свойство currentColor можно очень эффективно использовать на псевдо-элементах ::before & ::after
a:hover::after,
a:focus::after,
a:active::after
{
border-left-color: currentColor;
}Вооружившись этим свойством мы очень просто можем изменять тему определенных блоков или даже всей страницы.
💬 Код из картинки в приложении с использованием данного свойства может выглядеть так (ссылка на скриншот https://i.ibb.co/DPXX1Bg/Screen-Shot-2019-04-18-at-12-26-33-PM.png):
svg {
fill: currentColor;
}
.button {
color: #000;
border: 2px solid currentColor;
}
.button:hover,
.button:focus {
color: #333;
}
.button:active {
color: #666;
}
☑️ ПРАВИЛА СРАВНЕНИЯ В JAVASCRIPT
В JavaScript существует несколько основных типов данных. А также множество операторов для работы с ними. Eсть два набора операторов равенства строгие :
🔻СРАВНЕНИЕ ПРИМИТИВОВ (по обе стороны от оператора типы: number, string, boolean, null, undefined)
Оператор тождества или идентичности (далее
⚡️Если у значений разные типы — они не идентичны.
⚡️Если оба значения или
⚡️Если оба значения или true или false — они идентичны.
⚡️Если одно или оба значения — NaN — они не идентичны.
⚡️Если оба операнда это числа с одним и тем же значением — они идентичны. Если одно число равно 0, а другое -0, они также идентичны.
⚡️Две строки строго равны только в том случае, если они имеют одинаковую длину, и те же символы в одинаковой последовательности и соответствующих позициях.
Оператор равенства (далее
⚡️Если у значений одинаковый тип, они проверяются на идентичность, без преобразований (по правилам описанным выше).
⚡️Если одно значение null, а другое undefined — они равны.
⚡️Если одно значение число, а другое строка, то строка преобразуется в число и выполняется сравнение.
⚡️Если одно значение — true, оно перед сравнением преобразуется в 1. Если — false, оно преобразуется в 0 и сравнение выполняется снова.
🔻СРАВНЕНИЕ ССЫЛОЧНЫХ ТИПОВ (по обе стороны от оператора типы: объекты, массивы, функции)
Здесь все работает одинаково для
⚡️Если оба значения ссылаются на один и тот же объект, массив или функцию — они идентичны.
⚡️Если оба значения ссылаются на различные объекты — они не идентичны, даже при идентичных свойствах.
🔻СРАВНЕНИЕ ССЫЛОЧНЫХ ТИПОВ ДАННЫХ С ПРИМИТИВАМИ (с одной стороны примитивы, с другой ссылочные типы)
При строгом сравнении (
При нестрогом сравнении (
⚡️Если одно значение число или строка, а другое — объект(функция, массив), то перед сравнением объект преобразуется в простой тип. Встроенные классы преобразуются методом
Иногда примитивы и ссылочные типы данных могут быть очень похожи. С точки зрения программиста примитивное значение типа string и объект, созданный из строки конструктором
На практике рекомендую отказаться от использования == в сторону ===. Используя строгое сравнение можно быть уверенным в возвращаемом значении. В примере ниже можете проверить себя в приведении типов при сравнении (https://ibb.co/K9PNct1). Будьте внимательны при сравнении переменных!
В JavaScript существует несколько основных типов данных. А также множество операторов для работы с ними. Eсть два набора операторов равенства строгие :
=== и !==, и нестрогие == и !=. Строгие работают так, как вы ожидаете. Если два операнда имеют один и тот же тип и имеют одинаковое значение, то === выдает true а !== выдает false. Нестрогие поступают правильно, когда операнды относятся к одному и тому же типу, но если они относятся к разным типам, они пытаются привести значения. Ни одно собеседование не обходится без вопросов про приведение типов и их сравнение, а также, понимание этих правил поможет вам избежать ошибок и многих часов отладки вашего кода.🔻СРАВНЕНИЕ ПРИМИТИВОВ (по обе стороны от оператора типы: number, string, boolean, null, undefined)
Оператор тождества или идентичности (далее
===) вычисляет значения своих операндов, а затем сравнивает, без преобразования типов по таким правилам:⚡️Если у значений разные типы — они не идентичны.
2 === "2" // false⚡️Если оба значения или
null или undefined — они идентичны.null === null // trueundefined === undefined //true⚡️Если оба значения или true или false — они идентичны.
true === true // true⚡️Если одно или оба значения — NaN — они не идентичны.
NaN === NaN // false⚡️Если оба операнда это числа с одним и тем же значением — они идентичны. Если одно число равно 0, а другое -0, они также идентичны.
2 === 2 //true⚡️Две строки строго равны только в том случае, если они имеют одинаковую длину, и те же символы в одинаковой последовательности и соответствующих позициях.
"hello" === "hello" // trueОператор равенства (далее
==) похож на оператор идентичности, но он использует менее строгие правила. Если у значений разные типы — они преобразуются и сравниваются: ⚡️Если у значений одинаковый тип, они проверяются на идентичность, без преобразований (по правилам описанным выше).
⚡️Если одно значение null, а другое undefined — они равны.
null == undefined // true⚡️Если одно значение число, а другое строка, то строка преобразуется в число и выполняется сравнение.
"2" == 2 // true⚡️Если одно значение — true, оно перед сравнением преобразуется в 1. Если — false, оно преобразуется в 0 и сравнение выполняется снова.
true == 1 // true🔻СРАВНЕНИЕ ССЫЛОЧНЫХ ТИПОВ (по обе стороны от оператора типы: объекты, массивы, функции)
Здесь все работает одинаково для
== и === :⚡️Если оба значения ссылаются на один и тот же объект, массив или функцию — они идентичны.
const a = {};
b = a;
a === b // true⚡️Если оба значения ссылаются на различные объекты — они не идентичны, даже при идентичных свойствах.
{} === {} // false
[] === [] // false🔻СРАВНЕНИЕ ССЫЛОЧНЫХ ТИПОВ ДАННЫХ С ПРИМИТИВАМИ (с одной стороны примитивы, с другой ссылочные типы)
При строгом сравнении (
===) всегда falseПри нестрогом сравнении (
==):⚡️Если одно значение число или строка, а другое — объект(функция, массив), то перед сравнением объект преобразуется в простой тип. Встроенные классы преобразуются методом
valueOf(), если не получилось, то toString() для чисел и обратный порядок для строк (сначала то toString() потом valueOf()). Класс Date всегда выполняет преобразование toString(). Иногда примитивы и ссылочные типы данных могут быть очень похожи. С точки зрения программиста примитивное значение типа string и объект, созданный из строки конструктором
String(), практически неотличимы, и даже во многих книгах этот момент упоминается мимоходом, без конкретных примеров. const a = "строка";
const b = new String(a);
const c = new String(a);
a==b // true (преобразование типов)
a==c // true (преобразование типов)
b==c // false (2 разных обьекта)На практике рекомендую отказаться от использования == в сторону ===. Используя строгое сравнение можно быть уверенным в возвращаемом значении. В примере ниже можете проверить себя в приведении типов при сравнении (https://ibb.co/K9PNct1). Будьте внимательны при сравнении переменных!
ImgBB
Screen-Shot-2019-05-02-at-1-04-52-PM hosted at ImgBB
Image Screen-Shot-2019-05-02-at-1-04-52-PM hosted in ImgBB
☑️ НОВЫЙ АТРИБУТ
Формы являются главным типов взаимодействия на сайтах и в приложениях. Форма - это просто путь к результату. Заполнение формы должно быть быстрым и понятным. Но заполнять формы с мобильных устройств это та еще задача. Упростить её для пользователей можно используя атрибут inputmode на элементах формы (
💬 Пример:
Поддерживаемые значения атрибута:
🔻 email - добавляет символ @ и десятичную точку на стандартную клавиатуру. Пользователю не нужно переключать раскладку для ввода этих символов.
🔻 tel - клавиатура похожа на numeric, является копией клавиатуры кнопочных телефонов. Поддерживает цифры от 0 до 9, символы решётки, звёздочки и другие (все что может понадобится при наборе номера телефона).
🔻 search - виртуальная клавиатура, оптимизированная для поиска. Например, ключ возврата может быть переименован в «Поиск», и могут быть другие оптимизации.
🔻 numeric - циферная клавиатура, идеально подходит для полей ввода, которые требуют только чисел – например, пин-коды, почтовые индексы, номера кредитных карт, и т.д.
🔻 url - позволяет добавить расширение имени домена (например, .com) путём нажатия одной кнопки. Также на основной клавиатуре появляются кнопки, которые обычно используются для веб-адресов, например, символы (.), (www.), (/).
🔻 none - в документации сказано что никакой клавиатуры не будет, использовать когда сайт реализует собственную клавиатуру. В IOS появляется стандартная клавиатура.
🔻 text - cтандартная клавиатура для ввода текста.
Поддержка браузеров пока не лучшая (
P.S: Как вы могли заметить на канале был небольшой перерыв, отныне я буду публиковать по 3 поста в неделю. Stay tuned! 📡
inputmode ДЛЯ МОБИЛЬНЫХ ОС И БРАУЗЕРОВФормы являются главным типов взаимодействия на сайтах и в приложениях. Форма - это просто путь к результату. Заполнение формы должно быть быстрым и понятным. Но заполнять формы с мобильных устройств это та еще задача. Упростить её для пользователей можно используя атрибут inputmode на элементах формы (
input).💬 Пример:
<input type="text" inputmode="" />inputmode не меняет способа, которым браузер интерпретирует input (этим занимается атрибут type) – он даёт браузеру инструкцию, какую виртуальную клавиатуру вывести на экран.Поддерживаемые значения атрибута:
🔻 email - добавляет символ @ и десятичную точку на стандартную клавиатуру. Пользователю не нужно переключать раскладку для ввода этих символов.
🔻 tel - клавиатура похожа на numeric, является копией клавиатуры кнопочных телефонов. Поддерживает цифры от 0 до 9, символы решётки, звёздочки и другие (все что может понадобится при наборе номера телефона).
🔻 search - виртуальная клавиатура, оптимизированная для поиска. Например, ключ возврата может быть переименован в «Поиск», и могут быть другие оптимизации.
🔻 numeric - циферная клавиатура, идеально подходит для полей ввода, которые требуют только чисел – например, пин-коды, почтовые индексы, номера кредитных карт, и т.д.
🔻 url - позволяет добавить расширение имени домена (например, .com) путём нажатия одной кнопки. Также на основной клавиатуре появляются кнопки, которые обычно используются для веб-адресов, например, символы (.), (www.), (/).
🔻 none - в документации сказано что никакой клавиатуры не будет, использовать когда сайт реализует собственную клавиатуру. В IOS появляется стандартная клавиатура.
🔻 text - cтандартная клавиатура для ввода текста.
Поддержка браузеров пока не лучшая (
https://caniuse.com/#feat=input-inputmode ), но вреда от данного атрибута чотно не будет, а при срабатывании сделает вашего пользователя немного счастливее. 🎆P.S: Как вы могли заметить на канале был небольшой перерыв, отныне я буду публиковать по 3 поста в неделю. Stay tuned! 📡
☑️ ВОПРОСЫ НА СОБЕСЕДОВАНИИ #1
За время работы я побывал на многих собеседованиях, еще больше провел и регулярно продолжаю это делать (по 2-3 в неделю), так как мы активно ищем разработчиков уровня junior+ и middle. В постах такого типа будем разбирать задания, с которыми у людей возникает наибольшее количество трудностей. Первый цикл будет посвящен разбору кусков кода и вопросов по нему. Поехали:
🔻 Задание 1: Что мы увидим в консоли и почему?
✅ Ответ:
💬 Пояснение:
Переменные обьявленные с ключевым словом
Код:
идентичен следующему:
Они не “всплывают” и живут исключительно в рамках своего блока
🔻 Задание 2: Что выведет данный код?
✅ Ответ:
💬 Пояснение:
Хотя
Более детально про приведение типов - пост выше в этом же канале (ПРАВИЛА СРАВНЕНИЯ В JAVASCRIPT)
🔻Задание 3: Какой будет результат вывода?
✅ Ответ:
💬 Пояснение:
Ключи объекта автоматически преобразуются в строки (так как ключи - только примитивы). Мы пытаемся установить объект как ключ к объекту со значением
Код:
идентичен следующему:
Затем мы пытаемся сделать то же самое с другим обьектом. Он так же преобразуется в “[Object object]”.
Код:
идентичен следующему:
Затем мы записываем
И при обращении код:
идентичен следующему:
За время работы я побывал на многих собеседованиях, еще больше провел и регулярно продолжаю это делать (по 2-3 в неделю), так как мы активно ищем разработчиков уровня junior+ и middle. В постах такого типа будем разбирать задания, с которыми у людей возникает наибольшее количество трудностей. Первый цикл будет посвящен разбору кусков кода и вопросов по нему. Поехали:
🔻 Задание 1: Что мы увидим в консоли и почему?
function greeting() {
console.log(name); // ?
console.log(age); // ?
var name = “Alex”;
let age = 25;
}
greeting();✅ Ответ:
console.log(name); // undefinedconsole.log(age); // ReferenceError💬 Пояснение:
var обладает функцирнальной областью видимости.Переменные обьявленные с ключевым словом
var поднимаются (всплывают) внутри функции (области видимости), где они определены, перед тем, как код будет выполнен.Код:
console.log(name);
var name = “Alex”;идентичен следующему:
var name;
console.log(name);
name = “Alex”;let и const обладают блочной областью видимости.Они не “всплывают” и живут исключительно в рамках своего блока
“{…}”. Не важно будь это функция, цикл или просто блок скобочек. Они недоступны до того, как мы объявим (инициализируем) их. При обращении к переменной age мы получим ошибку ReferenceError.🔻 Задание 2: Что выведет данный код?
const a = 3;
const b = new Number(3);
const c = 3;
console.log(a == b); // ?
console.log(a === b); // ?
console.log(b === c); // ?✅ Ответ:
console.log(a == b); // true
console.log(a === b); // false
console.log(b === c); // false💬 Пояснение:
Хотя
new Number() и выглядит как число, на самом деле его тип “object”. Оператор == приводит переменную b к числу. a и b имеют значение 3, поэтому оператор возвращает true. Однако, когда мы используем оператор ===, значение и тип должны быть одинаковыми. Это не так: new Number() - это не число, это объект. Оба возвращают false.Более детально про приведение типов - пост выше в этом же канале (ПРАВИЛА СРАВНЕНИЯ В JAVASCRIPT)
🔻Задание 3: Какой будет результат вывода?
const a = {};
const b = { prop: "b" };
const c = { prop: "c" };
a[b] = 123;
a[c] = 456;
console.log(a[b]); // ?✅ Ответ:
console.log(a[b]); // 456💬 Пояснение:
Ключи объекта автоматически преобразуются в строки (так как ключи - только примитивы). Мы пытаемся установить объект как ключ к объекту со значением
123. При преобразовании объекта в строку, он становится “[Object object]”. Код:
a[b] = 123; идентичен следующему:
a[“[Object object]”] = 123;Затем мы пытаемся сделать то же самое с другим обьектом. Он так же преобразуется в “[Object object]”.
Код:
a[c] = 456;идентичен следующему:
a[“[Object object]”] = 456;Затем мы записываем
a[b], используя один и тот же ключ. Потому перезатираем предыдущее значение.И при обращении код:
console.log(a[b]); идентичен следующему:
console.log(a[“[Object object]”]); // 456☑️ СВОЙСТВА
В веб-разработке мы довольно часто сталкиваемся с задачей отображения изображений или видео разного размера в одном и том же месте. Пример - динамическая галерея, которая позволяет пользователю загружать свои файлы. Вы не можете гарантировать, что все будут загружать изображения с одинаковым соотношением сторон. Данные свойства призваны решить проблему разных размеров картинок или видео.
📍
Определяет, каким образом содержимое замещаемых элементов будет подогнано к краям контейнера тега в случае, когда для элемента заданы ширина и высота, отличные от его собственных размеров.
Значения:
🔻
значение по умолчанию. Содержимое замещаемого элемента полностью заполняет область контейнера тега, используя его высоту и ширину
🔻
содержимое элемента масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера
🔻
содержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера
🔻
содержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры
🔻
замещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера
Пример использованя взят с htmlbook
( https://www.dropbox.com/s/wi7zsqq8akewgyt/object-fit.jpg?dl=0 )
📍
Используется в сочетании с
Минус этих свойств всего один - они не работают в IE. Как альтернативу без JS там можно использовать
object-fit И object-positionВ веб-разработке мы довольно часто сталкиваемся с задачей отображения изображений или видео разного размера в одном и том же месте. Пример - динамическая галерея, которая позволяет пользователю загружать свои файлы. Вы не можете гарантировать, что все будут загружать изображения с одинаковым соотношением сторон. Данные свойства призваны решить проблему разных размеров картинок или видео.
📍
object-fitОпределяет, каким образом содержимое замещаемых элементов будет подогнано к краям контейнера тега в случае, когда для элемента заданы ширина и высота, отличные от его собственных размеров.
Значения:
🔻
fillзначение по умолчанию. Содержимое замещаемого элемента полностью заполняет область контейнера тега, используя его высоту и ширину
🔻
containсодержимое элемента масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера
🔻
coverсодержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера
🔻
scale-downсодержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры
🔻
noneзамещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера
Пример использованя взят с htmlbook
( https://www.dropbox.com/s/wi7zsqq8akewgyt/object-fit.jpg?dl=0 )
📍
object-positionИспользуется в сочетании с
object-fit и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X и Y. Значение по умолчанию 50% 50%. Свойство анимируется. Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов (как с background-position) или любые единицы измерения css.Минус этих свойств всего один - они не работают в IE. Как альтернативу без JS там можно использовать
background-image и аналогичное свойство background-size.
Dropbox
object-fit.jpg
Shared with Dropbox
☑️ CSS Shapes
Обратите внимание на картинку внизу поста (https://www.dropbox.com/s/fchqrmrmj4oe486/css-shape.png). Не так просто добится такого результата на веб-сайте для любого количества текста.
Сегодня мы можем задавать объекту любую форму CSS-трансформациями (
CSS Shapes позволяют определять геометрические фигуры, вокруг которых может обтекать текст. Этими фигурами могут быть круги, эллипсы, простые или сложные многоугольники и даже изображения и градиенты.
Мы можем определить в CSS все виды базовых фигур, применив к свойствам
🔻
Описывает круг, значения
🔻
Описывает окружность, значения
🔻
Описывает прямоугольник, значения
🔻
Описывает многоугольник на основе переданных координат.
🔻
Описывает форму заданную выбранным изображением или SVG файлом.
Примеры использования можно посмотреть в документации ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes ).
Чтобы применить свойство shape-outside к элементу, этот элемент должен быть плавающим (
Поддержка браузерами у CSS Shapes хорошая, работает во всех современных браузерах (IE11 не работает, но и современным его не назовешь). Если вы хотите использовать CSS Shapes в браузерах, которые не поддерживают данную технологию eсть плагин, который доступен на Github (https://github.com/adobe-webplatform/css-shapes-polyfill).
Обратите внимание на картинку внизу поста (https://www.dropbox.com/s/fchqrmrmj4oe486/css-shape.png). Не так просто добится такого результата на веб-сайте для любого количества текста.
Сегодня мы можем задавать объекту любую форму CSS-трансформациями (
transform), но эти формы не могут влиять на поведение содержимого внутри них или вокруг них. Например, если вы создаете треугольник или трапецию с помощью CSS, то созданная форма не влияет на то, как будет вести себя текст внутри фигуры или вокруг.CSS Shapes позволяют определять геометрические фигуры, вокруг которых может обтекать текст. Этими фигурами могут быть круги, эллипсы, простые или сложные многоугольники и даже изображения и градиенты.
Мы можем определить в CSS все виды базовых фигур, применив к свойствам
shape-inside или shape-outside следующие значения функций: 🔻
circle(cx, cy, r);Описывает круг, значения
cx и cy определяют координаты центра круга, r — радиус.🔻
ellipse(cx, cy, rx, ry);Описывает окружность, значения
cx и cy определяют координаты центра окружности, rx и ry — радиус.🔻
rectangle(x, y, width, height, [rx, ry]);Описывает прямоугольник, значения
x и y определяют позицию формы, width и height — ширину и высоту, rx и ry — радиус углов.🔻
polygon(x1 y1, x2 y2, ..., xn yn);Описывает многоугольник на основе переданных координат.
🔻
url(path/to/the/image.svg);Описывает форму заданную выбранным изображением или SVG файлом.
Примеры использования можно посмотреть в документации ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes ).
Чтобы применить свойство shape-outside к элементу, этот элемент должен быть плавающим (
float: left|right) и иметь определенные высоту и ширину. В будущем возможности CSS-форм позволят использовать формы не только для плавающих элементов, и когда это случится, контент сможет обтекать форму с двух сторон.Поддержка браузерами у CSS Shapes хорошая, работает во всех современных браузерах (IE11 не работает, но и современным его не назовешь). Если вы хотите использовать CSS Shapes в браузерах, которые не поддерживают данную технологию eсть плагин, который доступен на Github (https://github.com/adobe-webplatform/css-shapes-polyfill).
Dropbox
css-shape.png
Shared with Dropbox
☑️ ПОЛЕЗНЫЕ CSS ФУНКЦИИ
Разница между CSS функцией и просто значением свойства в том, что функция вызывается символом
🔻
Это функция, которая возвращает значение переданного атрибута элемента в виде строки.
💭Например
возвращает значение атрибута
А затем использует его в качестве контента для псевдоэлемента
Вот так просто мы создали кликабельную ссылку не дублируя атрибут href в контент (соблюдая принцип DRY). HTML в этом случае будет выглядеть так:
Соответственно можно взять абсолютно любой атрибут и использовать его таки образом. В том числе и пользовательские
🔻
Данная функция принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +,
Операнды в выражении могут быть в различных единицах измерения
❗️Операторы (+ ,
💭 Пример:
Возможно вы желаете отступ, связанный с размером шрифта, вроде
Или сделать один столбик резиновым, а другой статическим
Выравнивание элемента по центру (вертикально)
Половина высоты родителя минус половина высоты дочернего элемента.
🔻
CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе.
💭 Пример:
Используем три свойства CSS:
💭 Пример:
и следующий код на странице
будет выглядеть как:
Секция 1: Вступление
Секция 2: Основная часть
Секция 3: Заключение
При этом между заголовками может быть абсолютно любой контент. Преимущество в том, что разработчику больше не нужно сжидить за нумерацией заголовков, а отдать это задачу CSS!
Все вышеперечисленные свойства хорошо поддерживаются современными браузерами начиная с IE9.
Разница между CSS функцией и просто значением свойства в том, что функция вызывается символом
(), и может принимать аргументы. Если вы не сталкивались с функциями ранее, то на примерах ниже быстро разберётесь. Поехали:🔻
attr()Это функция, которая возвращает значение переданного атрибута элемента в виде строки.
💭Например
attr(href) в следующем коде:.selector {
a[href]::after {
content: attr(href);
}
}возвращает значение атрибута
href указанного в элементе (если у элемента нет атрибута href - вернется пустая строка).А затем использует его в качестве контента для псевдоэлемента
::after, который добавляет полученное значение к ссылкам.Вот так просто мы создали кликабельную ссылку не дублируя атрибут href в контент (соблюдая принцип DRY). HTML в этом случае будет выглядеть так:
<a href=“#some-path”></a> #some-path не нужно вставлять в контентСоответственно можно взять абсолютно любой атрибут и использовать его таки образом. В том числе и пользовательские
data-* атрибуты. Что дает возможность изменять их значение через JavaScript.🔻
calc()Данная функция принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +,
-, *, /.Операнды в выражении могут быть в различных единицах измерения
width: calc(100% - 80px)❗️Операторы (+ ,
- и другие) всегда должны быть по обеим сторонам отеделены пробелом.💭 Пример:
Возможно вы желаете отступ, связанный с размером шрифта, вроде
4em? Не проблема..element1,
.element2 {
width: calc(50% - 2em);
}
Или сделать один столбик резиновым, а другой статическим
.static {
width: 200px;
}
.responsive {
width: calc(100% - 200px);
}
Выравнивание элемента по центру (вертикально)
.element {
margin-top: calc( 50% - 25px );
}Половина высоты родителя минус половина высоты дочернего элемента.
🔻
counter()CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе.
💭 Пример:
body {
counter-reset: section; /* Устанавливает значение счетчика, равным 0 */
}
h3::before {
counter-increment: section; /* Инкрементирует счетчик */
content: "Секция "counter(section) ": "; /* Отображает текущее значение счетчика */
}Используем три свойства CSS:
counter-reset, counter-increment, content и функция counter(). Если какое-либо из указанных свойств будет пропущено, то метод не будет работать.💭 Пример:
и следующий код на странице
<h3>Вступление</h3>
<h3>Основная часть</h3>
<h3>Заключение</h3>будет выглядеть как:
Секция 1: Вступление
Секция 2: Основная часть
Секция 3: Заключение
При этом между заголовками может быть абсолютно любой контент. Преимущество в том, что разработчику больше не нужно сжидить за нумерацией заголовков, а отдать это задачу CSS!
Все вышеперечисленные свойства хорошо поддерживаются современными браузерами начиная с IE9.
Wise.js | Frontend tips pinned «☑️ КНИГИ ДЛЯ НАЧИНАЮЩИХ И НЕ ТОЛЬКО На вопрос стоит, ли учится по книгам веб разработке, да и программированию в целом нет однозначного ответа. Некоторые технологии изменяются/развиваются очень быстро так что по ним не успевают выпустить актуальную книгу…»