How TO — Divider
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
W3Schools How To
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Современный сброс стилей CSS
В этой статье вы узнаете о том, как сбрасывать CSS в наши дни.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
Если честно, то кажется я слишком много и через чур увлеченно забиваю голову всякой нудной чепухой из CSS. Одним из таких моментов является сброс CSS, это возможно тот момент, который забрал у меня слишком много времени за последние годы.
В эпоху современной веб разработки, нам не так то и нужен загруженный сброс стилей или вообще совсем не нужен, поскольку проблемы совместимости CSS в браузерах сейчас встречаются куда реже, чем это было в дни старого доброго IE6. Это был момент времени, когда появились такие реализации сброса стилей в CSS, как normalize.css и спасли нас от ада с бесконечной вознёй при правке стилей. Но эти дни уже прошли и сейчас мы вполне можем доверять браузерам в этом плане, так что подобные подходы к сбросу стилей, в большинстве своём, уже довольно излишне.
Сброс разумных настроек по умолчанию
Мне до сих пор нравится делать сброс, так что я долго и усердно, годами ковырялся, как одержимый в Code golf (прим. это когда побеждает самый короткий и действенный подход в программировании ) стиле на этом направлении. Я всё объясню, что в этом коде где и как, но сначала посмотрите на него целиком:
/* Указываем box sizing */
*,
*::before,
*::after box-sizing: border-box;
>
/* Убираем внутренние отступы */
ul[class],
ol[class] padding: 0;
>
/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd margin: 0;
>
/* Выставляем основные настройки по-умолчанию для body */
body min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
>
/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] list-style: none;
>
/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) text-decoration-skip-ink: auto;
>
/* Упрощаем работу с изображениями */
img max-width: 100%;
display: block;
>
/* Указываем понятную периодичность в потоке данных у article*/
article > * + * margin-top: 1em;
>
/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select font: inherit;
>
/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) * animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
>
>
Ну, а теперь разбираемся
Начинаем мы с box-sizing . Тут я простым и элегантным движением сразу же сбрасываю все элементы и псевдоэлементы на box-sizing: border-box .
*,
*::before,
*::after box-sizing: border-box;
>
Кто-то считает, что псевдоэлементы должны наследовать параметры блочной модели, но я считаю это глупым. Если вы хотите использовать другое значение для box-sizing , то просто укажите его — ну это то, как я делаю, в любом случае. Я написал про box-sizing больше в CSS From Scratch.
/* Убираем внутренние отступы */
ul[class],
ol[class] padding: 0;
>
/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd margin: 0;
>
После box-sizing , я сбрасываю margin и padding , даже там, где они выставлены дефолтными настройками браузеров. Тут и так всё понятно, так что я не буду уделять этому моменту много внимания.
-
или
, то я хочу, чтобы он выглядел реально как список. Тут главное не переусердствовать, охватив всё, как в предыдущем моменте, что удалит все отступы.
body min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
>
Идем дальше: стили для body . Тут у меня всё просто. Очень полезно указать для body занять весь viewport , даже когда он пуст, делаю я это, выставляя min-height на 100vh . Ещё мне нравится плавный скролл к анкорам, так что тут я выставлю scroll-behavior: smooth .
Ещё, я выставил только два текстовых стиля. line-height на 1.5 , потому что по-дефолту стоит 1.2 , чего откровенно недостаточно в плане доступности и читабельности текста. Так же я выставил text-rendering на optimizeSpeed . Используя optimizeLegibility вы делаете ваш текст приятнее на вид, но можете столкнуться с серьёзными проблемами производительности, такими как задержки в 30 секунд при загрузке, так что я его стараюсь избегать. Хотя, я иногда добавляю его для секций с микротекстом.
ul[class],
ol[class] list-style: none;
>
Как и с отступами, я сбрасываю стилизацию списков только у элементов, у которых указан class .
a:not([class]) text-decoration-skip-ink: auto;
>
Для ссылок без указания класса, я выставлю text-decoration-skip-ink: auto , так что подчеркивание будет рендериться куда читабельнее. Вообще, это можно было бы выставить всем ссылкам, но у меня возникло несколько конфликтов, так что я оставил так, как написано выше.
img max-width: 100%;
display: block;
>
Дальше идут старые добрые резиновые изображения. Я решил сделать все изображения блочными элементами, потому что, откровенно говоря, жизнь слишком коротка, чтобы мириться с этим мелким, стрёмным отступом снизу и вообще, в реальности, изображения — особенно те, с которыми я работаю — обычно подразумевают под собой блочное поведение.
article > * + * margin-top: 1em;
>
Мне очень нравится этот трюк в CSS и я наконец-то осмелился добавить его в сброс. Так называемый “lobotomized owl selector” выбирает прямых потомков article и добавляет им сверху внешний отступ в 1em . Это указывает понятную периодичность в потоке контента у article . Вообще, на самом деле, я использую удобную штуку с .flow , сейчас уже почти в каждом проекте. Вы можете больше прочитать про это на 24 Ways. Да и вообще, мне так кажется, что это сейчас мой самый используемый CSS.
input,
button,
textarea,
select font: inherit;
>
Ещё одна вещь, которую я наконец то решился выставить по дефолту это font: inherit для инпутов, которые, проще говоря, делают то, что и должны делать. Хватит уже этого мелкого (mono, в некоторых случаях) текста!
@media (prefers-reduced-motion: reduce) * animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
>
>
Последнее, но уж точно не менее важное, это один @media запрос, который сбрасывает анимации, переходы и поведенческие настройки для скролла, но только в тех случаях, когда пользователь предпочитает как можно меньше всяких движений на странице. Мне нравится такая штука в сбросе стилей, с побеждающим специфичность селекторов !important , потому что в современных реалиях, если пользователь не хочет видеть лишних переходов и т.п., то он и не должен их видеть, вне зависимости от CSS при сбросе стилей.
Заключение
Вот и всё, вот он маленький и сброс для стилей, который делает жизнь куда проще. Если он вам приходится по вкусу, то смело можете его брать на вооружение! Берите его на GitHub или в NPM.
Drawing a superellipse with pure CSS
As the title says: How do you draw a superellipse (specifically, the Apple iOS7 / 8 one) with pure CSS? Not quite sure if it’s possible, but still. Reference image:
tyteen4a03
asked Sep 24, 2014 at 10:03
tyteen4a03 tyteen4a03
1,811 24 24 silver badges 45 45 bronze badges
How should it look? Provide an image.
Sep 24, 2014 at 10:04
@Flopet17 Reference article: pixelresort.com/blog/… Basically, it’s the one Apple uses in iOS 7 / 8.
Sep 24, 2014 at 10:26
Unless you use SVG or HTML canvas, the best that you can do is draw a square with rounded corners. Anything else will take a lot of work.
Sep 24, 2014 at 10:41
@MarcAudet I guess that’s my only option for now. Will look into using SVG.
Sep 26, 2014 at 9:07
Just out of curiosity, where did you find the equation?
Sep 26, 2014 at 10:31
2 Answers 2
This isn’t exact, but you may be able to tweak the idea to get something acceptable to you. Basically, you layer ::before and ::after pseudo elements with elliptical borders under the containing element with circular borders to get the effect.
I set the background color of the pseudo elements to blue and green for visualization, but they would be set to the color of the containing element.
Hover the element in the snippet to see combined sections.
div < width:180px; height:180px; border-radius:20%/20%; background-color:lightblue; position:relative; >div::before, div::after < content:''; position:absolute; z-index:-1; >div::before < border-radius: 2%/30%; background-color: blue; top: 30px; bottom: 30px; right: -2px; left: -2px; >div::after < border-radius: 30%/2%; background-color: green; left: 30px; right: 30px; top: -2px; bottom: -2px; >div:hover, div:hover::before, div:hover::after