diff --git a/README.md b/README.md index a7203b2..8137f77 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,7 @@ # css-normalize Современная нормализация стилей + +## Использование +```css +@import '@a1rth/css-normalize/index.css'; +``` \ No newline at end of file diff --git a/index.css b/index.css index 39dcbda..afadfb4 100644 --- a/index.css +++ b/index.css @@ -2,8 +2,8 @@ Нормализация блочной модели */ *, -*::before, -*::after { +::before, +::after { box-sizing: border-box; } @@ -61,6 +61,10 @@ body, list-style: none; } +:where(address[class]) { + font-style: normal; +} + /** Обнуляем вертикальные внешние отступы параграфа, объявляем локальную переменную для внешнего отступа вниз, @@ -82,11 +86,13 @@ p:where(:not([class]):not(:last-child)) { /** - Упрощаем работу с изображениями + Упрощаем работу с изображениями и видео */ -img { +img, +video { display: block; max-width: 100%; + height: auto; } /** @@ -105,6 +111,11 @@ html { (когда, например, нужно будет "прижать" футер к низу сайта) */ height: 100%; + /** + Убираем скачок интерфейса по горизонтали + при появлении / исчезновении скроллбара + */ + scrollbar-gutter: stable; } /** @@ -127,11 +138,44 @@ body { line-height: 1.5; } +/** + Нормализация высоты элемента ссылки при его инспектировании в DevTools + */ +a:where([class]) { + display: inline-flex; +} + +/** + Курсор-рука при наведении на элемент + */ +button, +label { + cursor: pointer; +} + /** Приводим к единому цвету svg-элементы + (за исключением тех, у которых уже указан + атрибут fill со значением 'none' или начинается с 'url') */ -svg *[fill] { fill: currentColor } -svg *[stroke] { stroke: currentColor } +:where([fill]:not( + [fill="none"], + [fill^="url"] +)) { + fill: currentColor; +} + +/** + Приводим к единому цвету svg-элементы + (за исключением тех, у которых уже указан + атрибут stroke со значением 'none') + */ +:where([stroke]:not( + [stroke="none"], + [stroke^="url"] +)) { + stroke: currentColor; +} /** Чиним баг задержки смены цвета при взаимодействии с svg-элементами @@ -140,12 +184,22 @@ svg * { transition-property: fill, stroke; } +/** + Приведение рамок таблиц в классический 'collapse' вид + */ +:where(table) { + border-collapse: collapse; + border-color: currentColor; +} + /** Удаляем все анимации и переходы для людей, которые предпочитают их не использовать */ @media (prefers-reduced-motion: reduce) { - * { + *, + ::before, + ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; diff --git a/package.json b/package.json index bfcc03f..c05d81d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@a1rth/css-normalize", - "version": "1.0.9", + "version": "1.1.9", "description": "Modern CSS normalize", "main": "index.css", "scripts": {