Веб дизайн реализуется триединством языков сущностей:

• - сущность содержания и структуры
• - сущность формы
• - сущность активности

 

• CSS справочник //puzzleweb.ru
•  Шпаргалка по Grid CSS //tpverstak.ru/grid/
• Шпаргалка по Flexbox CSS //tpverstak.ru/flex-cheatsheet/
• Шпаргалка адаптивности //tpverstak.ru/adaptive-cheatsheet/
• PLAYGROUND /песочница //developer.mozilla.org/en-US/play

//

Контур outline:

Свойство outline в CSS рисует линию снаружи элемента. Это очень похоже на свойство border, за исключением того, что контур не является частью блочной модели. Он часто используется для выделения элементов, например, стиль :focus.

Раскладки block, flex, greed

Блочная раскладка block

?

Свойство уплывание /float

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

• left устанавливает уплывание элемента к левой границе
• right устанавливает уплывание элемента к правой границе
• none отменяет действие уплывания

Свойство чистого размещения /clear

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

• none допустимо любое соседство с flow-элементами
• left слева float-элементы недопустимы
• right справа float-элементы недопустимы
• both float-элементы недопустимы ни слева, ни справа
• inline-start,  inline-end применяются в тексте элемента сходно с left и right

 

Хау ту

Тип устройства PC vs Smartphone

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

Во-первых, можно воспользоваться в медиа-запросе типом указателя pointer, который в PC представляется мышью со значением точного указания fine, а в телефоне указание пальцем соответствует неточному указанию coarse:

Во-вторых, можно воспользоваться в медиа-запросе способность указателя позиционироваться над элементом hover, которая в PC доступна для мыши со значением hover, а в телефоне возможность отсутствует со значением none:

!!!;

Запрет переноса

Неразрывный пробел   запрещает перенос следующего слова или блока, но его действие может быть отменено некоторыми тегами и свойствами (см. ниже).
Парный тег <nobr></nobr> заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Тег не входит в спецификацию HTML, но поддерживается всеми браузерами.
Свойство white-space:nowrap устанавливает отображение, при котором пробелы между словами не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, добавление тега <br> переносит текст на новую строку.
.style.whiteSpace='nowrap';

Недоступность кнопки

Недоступность кнопки для нажатия реализуется:

атрибутом тега disabled:
<button disabled>Недоступная кнопка</button>
свойством
.disabled-button {
pointer-events: none;
}
кодом !!!;

Недоступность ссылки

Недоступность гиперссылки реализуется:
свойством
.disabled-link {
pointer-events: none;
}
кодом
document.getElementById("mylink").style.pointerEvents = "none";

!!!Свойство переполнения /overflow

Свойство overflow задает желаемое поведение, когда содержимое не помещается в границах элемента и переполняет их. Раздельную настройку переполнения в горизонтальном и вертикальном направлении выполняют свойства overflow-x и overflow-y.

• visible (по умолчанию) содержимое отображается за пределами границ элемента
• hidden отображение обрезается по границам, но содержимое сохраняется; полосы прокрутки отсутствуют, но элемент доступен для прокрутки скриптом
• clip обрезается по границам; полосы прокрутки отсутствуют и элемент не доступен для программной прокрутки
• scroll обрезается по границам, прокрутка отображается в любом случае
• auto поведение определяется настройками агента/браузера

Свойство границы обрезки переполнения /overflow-clip-margin

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

Динамическое изменение стиля

Стиль заданный в CSS доступен в JS

Получение вычисленного значения свойства стиля примененного к элементу методом
window.getComputedStyle(element, pseudoElement)

Изменение значения свойства стиля по селектору (не всегда срабатывает):

Изменение значения свойства добавлением правила CSSOM

How to Change CSS Styles with JavaScript – From Basic to Advanced Methods //blog.shimin.io

 

Кеширование

//

Pragma is the HTTP/1.0 implementation Pragma: no-cache
То же, что и and cache-control is the HTTP/1.1 implementation Cache-Control: no-cache. Заставляет кеши отправлять запрос на исходный сервер для проверки перед выпуском кешированной копии.

Заголовок Expires содержит дату/время, по истечении которой ответ сервера считается устаревшим.
Прошедшая или невалидная дата, например 0, обозначает, что ресурс уже устарел.
you're still using Expires or Pragma, you're doing it wrong

The Age header contains the time in seconds the object was in a proxy cache.

The Age header is usually close to zero. If it is Age: 0, it was probably fetched from the origin server; otherwise, it was usually calculated as a difference between the proxy's current date and the Date general header included in the HTTP response.

Бесполезные способы

Следующие логичные директивы фактически не влияют на кеширование загрузки:

//

//

Фон и фоновые изображения /background

//developer.mozilla.org/ru/docs/Web/CSS/background

• background *
  • <color> *
  •  content-box *
    • linear-gradient(to bottom right, red, yellow, green, blue) *
      • repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px) *
    • radial-gradient(red, blue) *
    • conic-gradient(red, blue) *
  • no-repeat url("../../media/examples/lizard.png") *
  • left 5% / 15% 60% repeat-x url("../../media/examples/star.png") *
  • center / contain no-repeat url("../../media/examples/firefox-logo.svg"), #eee 35%  url("../../media/examples/lizard.png") *
• background-image: url("background.jpg") *
• background-attachment *
  • scroll фиксируется относительно самого элемента и не прокручивается с его содержимым
  • fixed фиксируется относительно области просмотра, даже если элемент имеет механизм прокрутки
  • local фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их
  • initial, unset, inherit
• background-clip определяет границы обрезания фона
  • border-box фон до внешнего края border (заметно, если границы не сплошные или не назначены)
  • padding-box фон до внешнего края padding
  • content-box фон до внутреннего края padding
  • text фон только под текстом
• background-origin устанавливает область системы размещения фона
  • игнорируется, если в background-attachment установлен fixed
  • border-box *
  • padding-box *
  • content-box *
• background-position смещает начальную позицию фона
  • background-position-x *
  • background-position-y *
• background-repeat устанавливает способ отображения фонового изображения, размеры которого меньше назначенной области
  • no-repeat фон размещается в центре или заданной позиции и не повторяется
  • repeat-x фон повторяется по всей ширине
  • repeat-y фон повторяется по всей высоте
  • repeat фон повторяется по ширине и высоте
  • space фон повторяется целое количество раз с зазорами
  • round фон повторяется целое количество раз с масштабированием
• background-size позволяет задать размер фонового изображения отличный от физического
  • <размер> неотрицательное значение позволяет масштабировать размер фонового изображения в заданном измерении
  • <проценты> масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением background-origin. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если attachment фона является fixed, область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются
  • auto позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции
  • contain фон целиком и сохраняя пропорции вписывается в доступную область
  • cover фон сохраняя пропорции заполняет всю доступную область

Текст

Тень /text-shadow

CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations.
text-shadow = none | [ <color>? && <length>{2,3} ]#
Тень или тени описываются комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом:

Джерела

Вёрстка на Flexbox в CSS. Полный справочник //medium.com (Feb 6, 2018)
Адаптивный дополненный перевод "CSS Grid Tutorial" //medium.com
10 современных раскладок в одну строку CSS-кода hisbvdis@habr.com (13 Oct 2020)