diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 47d5e1e..7e011f4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,33 +2,32 @@ Please note that this project is released with a [Contributor Code of Conduct](CODE-OF-CONDUCT.md). By participating in this project you agree to abide by its terms. - -## Table of Contents +## Contents - [Adding to This List](#adding-to-this-list) - [Updating Your Pull Request](#updating-your-pull-request) - ## Adding to This List Please ensure your pull request adheres to the following guidelines: -* Search open and closed PRs to avoid duplicate suggestions. -* Only submit CSS tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful. -* Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/css-protips/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents. -* Use [title-case](https://titlecaseconverter.com/). -* Code formatting should follow standard [CSSLint](http://www.csslint.net) default settings, including: - * Indent with two spaces - * Use shorthand, e.g., `margin: 10px 10px 5px;` - * Use double quotes, e.g., `background: url("logo.svg");` - * Sort properties alphabetically -* Make sure your text editor is set to remove trailing whitespace. -* Check your spelling and grammar. -* The PR should have a useful title. +- Search open and closed PRs to avoid duplicate suggestions. +- Only submit CSS tips that you think would be useful to others. This implies each tip has enough succinct content to describe why it's useful. +- Add your tip at the bottom of the [README](https://github.com/AllThingsSmitty/css-protips/blob/master/README.md) document. Add a link to your tip at the bottom of the table of contents. +- Use [title-case](https://titlecaseconverter.com/). +- Code formatting should follow standard [CSSLint](http://www.csslint.net) default settings, including: + - Indent with two spaces + - Use shorthand, e.g., `margin: 10px 10px 0.5rem;` + - Use double quotes, e.g., `background: url("logo.svg");` + - Use leading zeros with numberic values, e.g., `padding: 0.75rem;` + - Sort properties alphabetically + - **Avoid letting your code formatter format other section of the README file.** +- Make sure your text editor is set to remove trailing whitespace. +- Check your spelling and grammar. +- The PR should have a useful title. Thank you for your suggestions! - ## Updating Your Pull Request -Sometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidelines guidelines. [This write-up](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) covers the different ways you can change a pull request. \ No newline at end of file +Sometimes a maintainer will ask you to edit your pull request before it's included. This is normally due to spelling errors or because your PR didn't match the above guidelines. [This write-up](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) covers the different ways you can change a pull request. diff --git a/README.md b/README.md index a6353d9..514038b 100644 --- a/README.md +++ b/README.md @@ -2,20 +2,19 @@ -# CSS Protips [](https://github.com/sindresorhus/awesome) +# CSS Protips [](https://awesome.re) A collection of tips to help take your CSS skills pro. +> [!TIP] > For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/). +## Contents -## Table of Contents - -* [Protips](#protips) -* [Support](#support) -* [Translations](#translations) -* [Contribution Guidelines](CONTRIBUTING.md) - +- [Protips](#protips) +- [Support](#support) +- [Translations](#translations) +- [Contribution Guidelines](CONTRIBUTING.md) ## Protips @@ -47,7 +46,7 @@ A collection of tips to help take your CSS skills pro. 1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events) 1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing) 1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements) - +1. [Use `margin-inline` instead of `margin`](#use-margin-inline-instead-of-margin) ### Use a CSS Reset @@ -68,10 +67,9 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you #### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL) > [!TIP] -> If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset. - -^{[back to table of contents](#table-of-contents)} +> If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset. +^{[Back to top](#contents)} ### Inherit `box-sizing` @@ -93,8 +91,7 @@ This makes it easier to change `box-sizing` in plugins or other components that #### [Demo](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/) -^{[back to table of contents](#table-of-contents)} - +^{[Back to top](#contents)} ### Use `unset` Instead of Resetting All Properties @@ -119,8 +116,7 @@ button { } ``` -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Use `:not()` to Apply/Unapply Borders on Navigation @@ -154,8 +150,7 @@ Here, the CSS selector is read as a human would describe it. #### [Demo](https://codepen.io/AllThingsSmitty/pen/LkymvO) -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Check if Font Is Installed Locally @@ -165,12 +160,8 @@ You can check if a font is installed locally before fetching it remotely, which @font-face { font-family: "Dank Mono"; src: - /* Full name */ - local("Dank Mono"), - /* Postscript name */ - local("Dank Mono"), - /* Otherwise, download it! */ - url("//...a.server/fonts/DankMono.woff"); + /* Full name */ local("Dank Mono"), /* Postscript name */ local("Dank Mono"), + /* Otherwise, download it! */ url("//...a.server/fonts/DankMono.woff"); } code { @@ -180,8 +171,7 @@ code { H/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argyleink/pen/VwYJpgR). -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Add `line-height` to `body` @@ -197,8 +187,7 @@ This way textual elements can inherit from `body` easily. #### [Demo](https://codepen.io/AllThingsSmitty/pen/VjbdYd) -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Set `:focus` for Form Elements @@ -212,14 +201,13 @@ select:focus, textarea:focus { box-shadow: none; outline: #000 dotted 2px; - outline-offset: .05em; + outline-offset: 0.05em; } ``` #### [Demo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/) -^{[back to table of contents](#table-of-contents)} - +^{[Back to top](#contents)} ### Vertically-Center Anything @@ -253,8 +241,7 @@ body { #### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ) -^{[back to table of contents](#table-of-contents)} - +^{[Back to top](#contents)} ### Use `aspect-ratio` Instead of Height/Width @@ -271,8 +258,7 @@ Learn more about the `aspect-ratio` property in this [web.dev post](https://web. #### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) -^{[back to table of contents](#table-of-contents)} - +^{[Back to top](#contents)} ### Comma-Separated Lists @@ -289,8 +275,7 @@ Use the `:not()` pseudo-class and no comma will be added to the last item. > [!NOTE] > This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution. -^{[back to table of contents](#table-of-contents)} - +^{[Back to top](#contents)} ### Select Items Using Negative `nth-child` @@ -302,7 +287,7 @@ li { } /* select items 1 through 3 and display them */ -li:nth-child(-n+3) { +li:nth-child(-n + 3) { display: block; } ``` @@ -311,15 +296,14 @@ Or, since you've already learned a little about [using `:not()`](#use-not-to-app ```css /* select all items except the first 3 and display them */ -li:not(:nth-child(-n+3)) { +li:not(:nth-child(-n + 3)) { display: block; } ``` #### [Demo](https://codepen.io/AllThingsSmitty/pen/WxjKZp) -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Use SVG for Icons @@ -342,8 +326,7 @@ SVG scales well for all resolution types and is supported in all browsers [back } ``` -^{[back to table of contents](#table-of-contents)} - +^{[Back to top](#contents)} ### Use the "Lobotomized Owl" Selector @@ -358,12 +341,11 @@ It may have a strange name but using the universal selector (`*`) with the adjac In this example, all elements in the flow of the document that follow other elements will receive `margin-top: 1.5em`. > [!TIP] -> For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on *A List Apart*. +> For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on _A List Apart_. #### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq) -^{[back to table of contents](#table-of-contents)} - +^{[Back to top](#contents)} ### Use `max-height` for Pure CSS Sliders @@ -384,8 +366,7 @@ Implement CSS-only sliders using `max-height` with overflow hidden: The element expands to the `max-height` value on hover and the slider displays as a result of the overflow. -^{[back to table of contents](#table-of-contents)} - +^{[Back to top](#contents)} ### Equal-Width Table Cells @@ -401,8 +382,7 @@ Pain-free table layouts. #### [Demo](https://codepen.io/AllThingsSmitty/pen/jALALm) -^{[back to table of contents](#table-of-contents)} - +^{[Back to top](#contents)} ### Get Rid of Margin Hacks With Flexbox @@ -421,8 +401,7 @@ When working with column gutters you can get rid of `nth-`, `first-`, and `last- Now column gutters always appear evenly-spaced. -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Use Attribute Selectors with Empty Links @@ -441,8 +420,7 @@ That's really convenient. > [!NOTE] > This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution. -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Control Specificity Better with `:is()` @@ -457,18 +435,37 @@ The `:is()` pseudo-class is used to target multiple selectors at once, reducing The above ruleset is equivalent to the following number selector rules... ```css -section h1, section h2, section h3, section h4, section h5, section h6, -article h1, article h2, article h3, article h4, article h5, article h6, -aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, -nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { +section h1, +section h2, +section h3, +section h4, +section h5, +section h6, +article h1, +article h2, +article h3, +article h4, +article h5, +article h6, +aside h1, +aside h2, +aside h3, +aside h4, +aside h5, +aside h6, +nav h1, +nav h2, +nav h3, +nav h4, +nav h5, +nav h6 { color: green; } ``` #### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Style "Default" Links @@ -483,8 +480,7 @@ a[href]:not([class]) { Now links that are inserted via a CMS, which don't usually have a `class` attribute, will have a distinction without generically affecting the cascade. -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Intrinsic Ratio Boxes @@ -511,8 +507,7 @@ Using 20% for padding makes the height of the box equal to 20% of its width. No #### [Demo](https://codepen.io/AllThingsSmitty/pen/jALZvE) -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Style Broken Images @@ -550,8 +545,7 @@ img::after { > [!TIP] > Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/). -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Use `rem` for Global Sizing; Use `em` for Local Sizing @@ -575,14 +569,13 @@ article { } aside .module { - font-size: .9rem; + font-size: 0.9rem; } ``` Now each module becomes compartmentalized and easier to style, more maintainable, and flexible. -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Hide Autoplay Videos That Aren't Muted @@ -596,8 +589,7 @@ video[autoplay]:not([muted]) { Once again, we're taking advantage of using the [`:not()`](#use-not-to-applyunapply-borders-on-navigation) pseudo-class. -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Use `:root` for Flexible Type @@ -605,7 +597,7 @@ The type font size in a responsive layout should be able to adjust with each vie ```css :root { - font-size: calc(1vw + 1vh + .5vmin); + font-size: calc(1vw + 1vh + 0.5vmin); } ``` @@ -619,8 +611,7 @@ body { #### [Demo](https://codepen.io/AllThingsSmitty/pen/XKgOkR) -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Set `font-size` on Form Elements for a Better Mobile Experience @@ -635,8 +626,7 @@ textarea { } ``` -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Use Pointer Events to Control Mouse Events @@ -644,15 +634,14 @@ textarea { ```css button:disabled { - opacity: .5; + opacity: 0.5; pointer-events: none; } ``` It's that simple. -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Set `display: none` on Line Breaks Used as Spacing @@ -664,12 +653,11 @@ br + br { } ``` -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ### Use `:empty` to Hide Empty HTML Elements -If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., `

`) and it's creating unwanted space on your layout, use the `:empty` pseudo-class to hide the element on the layout. +If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., `

`) and it's creating unwanted space on your layout, use the `:empty` pseudo-class to hide the element on the layout. ```css :empty { @@ -680,35 +668,55 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei > [!NOTE] > Keep in mind that elements with whitespace aren't considered empty, e.g., `

`. -<sup>[back to table of contents](#table-of-contents)</sup> - +<sup>[Back to top](#contents)</sup> ## Support Current versions of Chrome, Firefox, Safari, and Edge. -<sup>[back to table of contents](#table-of-contents)</sup> +<sup>[Back to top](#contents)</sup> + +### Use `margin-inline` instead of `margin` + +`margin-inline` defines the inline start and end margins of an element. So instead of using `margin-left` and `margin-right` we can use the inline property to define both. + +```css +.div { + margin-inline: auto; +} +``` + +The same can be done for `margin-block` with defines the block start and end margins, i.e., `margin-top` and `margin-bottom`. + +```css +.div { + margin-block: auto; +} +``` + +#### [Demo](https://codepen.io/AllThingsSmitty/pen/PwoOQGB) +<sup>[Back to top](#contents)</sup> ## Translations > [!NOTE] > I've had less time available to maintain the growing list of translated tips; adding a new tip requires including it with over a dozen translations. For that reason, translated README files are likely to not include all the tips listed on the main README file. -* [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN) -* [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW) -* [Deutsch](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/de-DE) -* [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR) -* [λληνικά](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gr-GR) -* [ગુજરાતી](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gu-IND) -* [Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT) -* [日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP) -* [한국어](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ko-KR) -* [Polskie](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pl-PL) -* [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR) -* [Português do Europe](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-PT) -* [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU) -* [Tiếng Việt](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/vn-VN) - -<sup>[back to table of contents](#table-of-contents)</sup> +- [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN) +- [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW) +- [Deutsch](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/de-DE) +- [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES) +- [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR) +- [λληνικά](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gr-GR) +- [ગુજરાતી](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gu-IND) +- [Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT) +- [日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP) +- [한국어](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ko-KR) +- [Polskie](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pl-PL) +- [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR) +- [Português do Europe](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-PT) +- [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU) +- [Tiếng Việt](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/vn-VN) + +<sup>[Back to top](#contents)</sup> diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 88c024e..db8c533 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -27,7 +27,8 @@ 1. [Проверьте, установлен ли шрифт локально](#проверьте,-установлен-ли-шрифт-локально) 1. [Добавьте `line-height` в `body`](#Добавьте-line-height-в-body) 1. [Установите `:focus` для элементов формы](#Установите-focus-для-элементов-формы) -1. [Выровнять все по вертикали](#Выровнять-все-по-вертикали) +1. [Выровнять всё по вертикали](#Выровнять-всё-по-вертикали) +1. [Используйте `aspect-ratio` вместо задания ширины, высоты](#Используйте-aspect-ratio-вместо-задания-ширины-высоты) 1. [Списки, разделенные запятыми](#Списки-разделенные-запятыми) 1. [Выбирайте элементы с использованием отрицательных значений в `nth-child`](#Выбирайте-элементы-с-использованием-отрицательных-значений-в-nth-child) 1. [Используйте SVG для значков](#Используйте-svg-для-значков) @@ -36,6 +37,7 @@ 1. [Ячейки таблицы равной ширины](#Ячейки-таблицы-равной-ширины) 1. [Используйте Flexbox вместо margin](#Используйте-flexbox-вместо-margin) 1. [Используйте селектор атрибутов для пустых ссылок](#Используйте-селектор-атрибутов-для-пустых-ссылок) +1. [Управляйте специфичностью лучше, с помощью `:is()`](#Управляйте-специфичностью-лучше-с-помощью-is) 1. [Стиль "по умолчанию" для ссылок](#тиль-по-умолчанию-для-ссылокs) 1. [Блок с собственным отношением сторон](#Блок-с-собственным-отношением-сторон) 1. [Задайте стили для поломанныx изображений](#Задайте-стили-для-поломанныx-изображений) @@ -217,9 +219,9 @@ textarea:focus { <sup>[вернуться к оглавлению](#table-of-contents)</sup> -### Выровнять все по вертикали +### Выровнять всё по вертикали -Нет, это не черная магия, вы действительно можете расположить элементы по центру по вертикали: +Нет, это не чёрная магия, вы действительно можете расположить элементы по центру по вертикали: ```css html, @@ -255,6 +257,24 @@ body { <sup>[вернуться к оглавлению](#table-of-contents)</sup> +### Используйте `aspect-ratio` вместо задания ширины, высотыhttps://onelove-agency.ru/web/october2024 + +Свойство `aspect-ratio` позволяет легко изменять размеры элементов и поддерживать постоянное соотношение ширины и высоты. Это невероятно полезно в отзывчивом веб-дизайне для предотвращения смещения макета. Используйте `object-fit` вместе с ним, чтобы не нарушить верстку при изменении значений высоты/ширины изображений. + +```css +img { + aspect-ratio: 16 / 9; /* ширина / высота */ + object-fit: cover; +} +``` + +Подробнее о свойстве ` aspect-ratio` читайте в этой статье [web.dev post](https://web.dev/articles/aspect-ratio). + +#### [Демо](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) + +<sup>[вернуться к оглавлению](#table-of-contents)</sup> + + ### Списки, разделенные запятыми Сделайте список похожим на настоящий, разделенный запятыми список: @@ -421,6 +441,32 @@ a[href^="http"]:empty::before { <sup>[вернуться к оглавлению](#table-of-contents)</sup> +### Управляйте специфичностью лучше, с помощью `:is() + +Псевдокласс `:is()` используется для одновременного обращения к нескольким селекторам, что уменьшает избыточность и улучшает читаемость кода. Это невероятно полезно для написания больших селекторов в более компактной форме. + +```css +:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { + color: green; +} +``` + +Приведённый выше набор правил эквивалентен следующим правилам селектора чисел... + +```css +section h1, section h2, section h3, section h4, section h5, section h6, +article h1, article h2, article h3, article h4, article h5, article h6, +aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, +nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { + color: green; +} +``` + +#### [Демо](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) + +^{[вернуться к оглавлению](#table-of-contents)} + + ### Стиль "по умолчанию" для ссылок Добавьте для ссылок стиль "по умолчанию":