::first-letter
Псевдоэлемент ::first-letter позволяет задать стили для первой буквы первой строки блочного элемента, если перед текстом нет другого содержимого.
Напишем код, выделяющий первую букву в цитате:
- font и шрифтовые свойства, начинающиеся на font-;
- background и свойства фона, начинающиеся на background-;
- margin и внешние отступы, начинающиеся на margin-;
- padding и внутренние отступы, начинающиеся на padding-;
- border и свойства рамок, начинающиеся на border-;
цвет текста color;
- текстовые свойства text-decoration, text-shadow, text-transform, letter-spacing, word-spacing, line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align.
👉 @frontendInterview
Псевдоэлемент ::first-letter позволяет задать стили для первой буквы первой строки блочного элемента, если перед текстом нет другого содержимого.
Напишем код, выделяющий первую букву в цитате:
blockquote::first-letter {
font-size: 1.86rem;
font-weight: 700;
font-style: italic;
letter-spacing: 0.12rem;
}
Для псевдоэлемента сработает лишь небольшой набор CSS-свойств:- font и шрифтовые свойства, начинающиеся на font-;
- background и свойства фона, начинающиеся на background-;
- margin и внешние отступы, начинающиеся на margin-;
- padding и внутренние отступы, начинающиеся на padding-;
- border и свойства рамок, начинающиеся на border-;
цвет текста color;
- текстовые свойства text-decoration, text-shadow, text-transform, letter-spacing, word-spacing, line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align.
👉 @frontendInterview
👍10
👍24😁12😱5👎4🤔2❤1
word-wrap
Свойство word-wrap управляет переносом длинных слов, если они не помещаются в родительский блок.
Пример того, как можно настроить перенос по символам с помощью word-wrap.
normal — значение по умолчанию. При этом значении текст будет переноситься по пробелам, специальным символам и тегу <br>.
break-word — слово переносится на любой букве при достижении края родительской области.
👉 @frontendInterview
Свойство word-wrap управляет переносом длинных слов, если они не помещаются в родительский блок.
Пример того, как можно настроить перенос по символам с помощью word-wrap.
p {
border: 1px solid #fff;
width: 100px;
word-wrap: break-word;
}
Возможные значения:normal — значение по умолчанию. При этом значении текст будет переноситься по пробелам, специальным символам и тегу <br>.
break-word — слово переносится на любой букве при достижении края родительской области.
👉 @frontendInterview
👍7
😁13👍5
👍8
scrollbar-gutter
scrollbar-gutter решает проблему с «прыгающей» шириной контента при появлении или скрытии скроллбара. Обычно эта проблема появляется при изменении высоты контента или появлении модального окна.
Проблема со скроллбаром
Например у нас длина контента превышает высоту экрана, поэтому скроллбар виден всегда. Но при появлении модального окна мы прячем скроллбар, задав overflow: hidden у body. Это довольно частое решение — мы не хотим чтобы можно было прокручивать страницу при открытом модальном окне.
Но как это исправить? Можно компенсировать удаление скроллбара добавлением отступов у <body>, но мы сразу натыкаемся на ряд проблем:
- Разные браузеры могут иметь разную ширину скроллбара. И даже если сейчас ширина скроллбара совпадает с общепринятой, разработчикам браузера ничего не мешает поменять её (хоть это и очень маловероятно) в одном из будущих обновлений.
- Есть два типа скроллбара — статичный и оверлей. Оверлей не виден по умолчанию, но появляется поверх страницы при её прокрутке. Если мы добавим отступ при оверлейном скроллбаре, мы не скомпенсируем, а наоборот, добавим сдвиг контента при открытии модалки.
Как-то выглядит совсем запутанно, и написать полноценное кроссбраузерное и кроссплатформенное решение, которое работает всегда и везде, займёт отнюдь не мало времени. К счастью, у нас есть замечательное свойство scrollbar-gutter.
У scrollbar-gutter 3 возможных значения:
auto — дефолтное значение. Если задано overflow: scroll или overflow: auto и контент вызывает переполнение, то появится отступ для скроллбара.
stable — отступ для скроллбара появляется если значение overflow равно hidden, scroll или auto, вне зависимости от того, вызывает контент переполнение или нет.
stable both-edges — то же самое что и stable, но отступы будут создаваться с двух противоположных сторон. При вертикальной прокрутке — справа и слева, при горизонтальной — сверху и снизу.
Во всех случаях не будет создаваться отступ, если скроллбар — оверлейный.
В нашем случае используем scrollbar-gutter: stable чтобы при скрытии прокрутки через overflow: hidden у нас появился отступ вместо скроллбара и контент остался на месте.
👉 @frontendInterview
scrollbar-gutter решает проблему с «прыгающей» шириной контента при появлении или скрытии скроллбара. Обычно эта проблема появляется при изменении высоты контента или появлении модального окна.
Проблема со скроллбаром
Например у нас длина контента превышает высоту экрана, поэтому скроллбар виден всегда. Но при появлении модального окна мы прячем скроллбар, задав overflow: hidden у body. Это довольно частое решение — мы не хотим чтобы можно было прокручивать страницу при открытом модальном окне.
Но как это исправить? Можно компенсировать удаление скроллбара добавлением отступов у <body>, но мы сразу натыкаемся на ряд проблем:
- Разные браузеры могут иметь разную ширину скроллбара. И даже если сейчас ширина скроллбара совпадает с общепринятой, разработчикам браузера ничего не мешает поменять её (хоть это и очень маловероятно) в одном из будущих обновлений.
- Есть два типа скроллбара — статичный и оверлей. Оверлей не виден по умолчанию, но появляется поверх страницы при её прокрутке. Если мы добавим отступ при оверлейном скроллбаре, мы не скомпенсируем, а наоборот, добавим сдвиг контента при открытии модалки.
Как-то выглядит совсем запутанно, и написать полноценное кроссбраузерное и кроссплатформенное решение, которое работает всегда и везде, займёт отнюдь не мало времени. К счастью, у нас есть замечательное свойство scrollbar-gutter.
У scrollbar-gutter 3 возможных значения:
auto — дефолтное значение. Если задано overflow: scroll или overflow: auto и контент вызывает переполнение, то появится отступ для скроллбара.
stable — отступ для скроллбара появляется если значение overflow равно hidden, scroll или auto, вне зависимости от того, вызывает контент переполнение или нет.
stable both-edges — то же самое что и stable, но отступы будут создаваться с двух противоположных сторон. При вертикальной прокрутке — справа и слева, при горизонтальной — сверху и снизу.
Во всех случаях не будет создаваться отступ, если скроллбар — оверлейный.
В нашем случае используем scrollbar-gutter: stable чтобы при скрытии прокрутки через overflow: hidden у нас появился отступ вместо скроллбара и контент остался на месте.
html,
body {
scrollbar-gutter: stable;
}👉 @frontendInterview
👍29❤1
Just React!: Learn React the React Way (2022)
Перед вами идеальный помощник в изучении и разработке приложений React. Эта книга представляет инновационные концепции, и использует реальные примеры, основанные на наиболее рекомендуемых практиках, чтобы помочь вам заложить прочный фундамент. Этот комплексный подход обеспечивает сильный акцент на построении компонентов с помощью React.
👉 @frontendInterview
Перед вами идеальный помощник в изучении и разработке приложений React. Эта книга представляет инновационные концепции, и использует реальные примеры, основанные на наиболее рекомендуемых практиках, чтобы помочь вам заложить прочный фундамент. Этот комплексный подход обеспечивает сильный акцент на построении компонентов с помощью React.
👉 @frontendInterview
👍7👎1
Найти нечетное число
Вам дан массив из чисел. Ваша задача - написать функцию, которая вернет число, которое появляется в массиве нечетное число раз.
👉 @frontendInterview
Вам дан массив из чисел. Ваша задача - написать функцию, которая вернет число, которое появляется в массиве нечетное число раз.
👉 @frontendInterview
👍1
Array.prototype.flat
Метод flat() возвращает новый массив,
Пример:
Пример:
👉 @frontendInterview
Метод flat() возвращает новый массив,
var newArray = arr.flat(depth);
в котором все элементы вложенных подмассивов были рекурсивно "подняты" на указанный уровень depth.Пример:
const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]
Также существует и побочное действие, он удаляет неопределенные элементы массива.Пример:
const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]👉 @frontendInterview
👍22
👍6
Контролируем JavaScript импорты с помощью Import maps
С выходом Chrome 89 (а так же в Deno 1.8) появилась возможность использовать Карты импортов (Import maps) – механизма, позволяющего получить контроль над поведением JavaScript-импортов.
Несмотря на то, что современная разработка строится с использованием нативных модулей, мы не можем запускать приложения без предварительной сборки. Одна из целей карт импортов как раз решает эту проблему.
Если кратко, то теперь можно будет совершенно законно и без всяких сборщиков писать, скажем, так:
А теперь на примере. Запускаем статический сервер и создаём два файла:
index.html
👉 @frontendInterview
С выходом Chrome 89 (а так же в Deno 1.8) появилась возможность использовать Карты импортов (Import maps) – механизма, позволяющего получить контроль над поведением JavaScript-импортов.
Несмотря на то, что современная разработка строится с использованием нативных модулей, мы не можем запускать приложения без предварительной сборки. Одна из целей карт импортов как раз решает эту проблему.
Если кратко, то теперь можно будет совершенно законно и без всяких сборщиков писать, скажем, так:
import React from 'react';
Карты импортов задаются с помощью тега noscript с атрибутом type="importmap" в формате JSON.А теперь на примере. Запускаем статический сервер и создаём два файла:
index.html
<!DOCTYPE html>и my-lib.mjs
<html>
<body>
<noscript type="importmap">
{
"imports": {
"mylib": "./my-lib.mjs"
}
}
</noscript>
<noscript type="module">
import { sayHi } from "mylib";
sayHi();
</noscript>
</body>
</html>
export function sayHi() {
console.log("hi!");
}
Открываем в браузере страничку, и вуаля: в консоль вывелось "hi!". Прочитать подробно о том, как всё устроено можно в статье.👉 @frontendInterview
👍9🔥3
Как сделать параметр необязательным в TypeScript?
Anonymous Quiz
9%
?name: string
13%
name: optional
72%
name?: string
6%
optional name: string
👍5😁3🔥2
Какой атрибут HTML элемента дает вспомогательным технологиям понять, что элемент что-то разворачивает или сворачивает?
Anonymous Quiz
15%
aria-opened
62%
aria-expanded
15%
aria-controls
8%
aria-controlled
👍2
Какие есть ограничения у window.close()?
Порой веб-разработчики с удивлением обнаруживают, что команда windows.close() не всегда закрывает окно браузера.
Почему браузеры ограничивают команду?
Иногда такое поведение браузеров объясняют, ссылаясь на некие таинственные «соображения безопасности». Но основная причина ограничений, применяемых к close(), больше связана с тем, что называют «пользовательский опыт». А именно, если скрипты смогут свободно закрывать любые вкладки браузеров, пользователь может потерять важные данные, состояние веб-приложения, работающего во вкладке.
Как поступают браузеры?
В Internet Explorer вкладка или окно браузера закрывается без лишних вопросов в том случае, если для создания этой вкладки или этого окна была использована команда window.open().
Во всех других случаях вкладку (или окно) просто так не закрыть: пользователю показывают одно или два модальных окна, что зависит от того, представлена ли страница единственной вкладкой в окне браузера.
В Chromium 88 команда window.close() выполняется успешно в том случае, если у нового окна или у новой вкладки что-то записано в свойство opener, или в том случае, если стек навигации страницы содержит менее двух записей.
Когда браузер Chrome блокирует команду close(), он выводит в консоль следующее сообщение
👉 @frontendInterview
Порой веб-разработчики с удивлением обнаруживают, что команда windows.close() не всегда закрывает окно браузера.
Почему браузеры ограничивают команду?
Иногда такое поведение браузеров объясняют, ссылаясь на некие таинственные «соображения безопасности». Но основная причина ограничений, применяемых к close(), больше связана с тем, что называют «пользовательский опыт». А именно, если скрипты смогут свободно закрывать любые вкладки браузеров, пользователь может потерять важные данные, состояние веб-приложения, работающего во вкладке.
Как поступают браузеры?
В Internet Explorer вкладка или окно браузера закрывается без лишних вопросов в том случае, если для создания этой вкладки или этого окна была использована команда window.open().
Во всех других случаях вкладку (или окно) просто так не закрыть: пользователю показывают одно или два модальных окна, что зависит от того, представлена ли страница единственной вкладкой в окне браузера.
В Chromium 88 команда window.close() выполняется успешно в том случае, если у нового окна или у новой вкладки что-то записано в свойство opener, или в том случае, если стек навигации страницы содержит менее двух записей.
Когда браузер Chrome блокирует команду close(), он выводит в консоль следующее сообщение
Scripts may close only the windows that were opened by them.
Firefox вызывает функцию IsOnlyTopLevelDocumentInSHistory(), а она вызывает функцию IsEmptyOrHasEntriesForSingleTopLevelPage(), которая проверяет историю сессий. Если там больше одной записи, она уточняет, относятся ли они все к одному и тому же объекту Document. Если это так — вызов close() выполняется.👉 @frontendInterview
👍10❤1