From b9e44869f9539ea4b5414903c874d9b6b0e3d5ae Mon Sep 17 00:00:00 2001 From: Vladimir <49140851+VladimirCreator@users.noreply.github.com> Date: Tue, 20 Jun 2023 02:10:04 +0500 Subject: [PATCH 01/25] translate css-protip-26 to Russian --- translations/ru-RU/README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index f44223a0..410bed7b 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -45,6 +45,7 @@ 1. [Установите `font-size` для элементов формы, чтобы оптимизировать просмотр на мобильных устройствах](#Установите-font-size-для-элементов-формы-чтобы-оптимизировать-просмотр-на-мобильных-устройствах) 1. [Использовать события указателя для управления событиями мыши](#Использовать-события-указателя-для-управления-событиями-мыши) 1. [Установите `display: none` на разрывы строк, используемые как интервалы](#Установите-display-none-на-разрывы-строк-используемые-как-интервалы) +1. [Используйте `:empty`, чтобы скрыть пустые HTML элементы](#Используйте-empty-чтобы-скрыть-пустые-HTML-элементы) ### Используйте CSS Reset @@ -622,6 +623,21 @@ br + br { [вернуться к оглавлению](#table-of-contents) +### Используйте `:empty`, чтобы скрыть пустые HTML элементы + +Если у вас есть HTML элементы, которые пусты, то есть их контент ещё не установлен ни CMS, ни динамической вставкой (например, `

`) и вам не нравится, что они занимают пространство вашего макета, используйте псевдо-класс `:empty`, чтобы скрыть их. + +```css +:empty { + display: none; +} +``` + +**Примечание**: Имейте в виду, что элементы с пробельными символами не считаются пустыми, например `

`. + +[вернуться к оглавлению](#table-of-contents) + + ## Поддержка Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. From 81557b5b49b1e43f358a2aa5a80d2b4dc2abe3aa Mon Sep 17 00:00:00 2001 From: Vladimir <49140851+VladimirCreator@users.noreply.github.com> Date: Tue, 20 Jun 2023 02:19:33 +0500 Subject: [PATCH 02/25] fix formatting --- translations/ru-RU/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 410bed7b..250d6712 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -24,7 +24,7 @@ 1. [Наследуйте `box-sizing`](#Наследуйте-box-sizing) 1. [Используйте `unset` вместо сброса всех свойств](#Используйте-unset-вместо-сброса-всех-свойств) 1. [Используйте `:not()` для добавления / удаления границ в меню навигации](#Используйте-not-для-добавления--удаления-границ-в-меню-навигации) -1. [проверьте, установлен ли шрифт локально](#проверьте,-установлен-ли-шрифт-локально) +1. [Проверьте, установлен ли шрифт локально](#проверьте,-установлен-ли-шрифт-локально) 1. [Добавьте `line-height` в `body`](#Добавьте-line-height-в-body) 1. [Установите `:focus` для элементов формы](#Установите-focus-для-элементов-формы) 1. [Выровнять все по вертикали](#Выровнять-все-по-вертикали) @@ -66,7 +66,7 @@ #### [Демо](http://codepen.io/AllThingsSmitty/pen/kkrkLL) -**Примечание:** Если вы будете следовать совету [Наследуйте box-sizing](#inherit-box-sizing), то вы можете не включать свойство `box-sizing` в ваш CSS Reset. +**Примечание:** Если вы будете следовать совету [Наследуйте `box-sizing`](#inherit-box-sizing), то вы можете не включать свойство `box-sizing` в ваш CSS Reset. [вернуться к оглавлению](#table-of-contents) @@ -157,7 +157,7 @@ button { [вернуться к оглавлению](#table-of-contents) -### проверьте, установлен ли шрифт локально +### Проверьте, установлен ли шрифт локально Вы можете проверить, установлен ли шрифт локально, прежде чем извлекать его удаленно, что также является хорошим показателем производительности. From 9e0fbeac8c3382c72cac229169f4cdadce1b5600 Mon Sep 17 00:00:00 2001 From: Vladimir <49140851+VladimirCreator@users.noreply.github.com> Date: Tue, 20 Jun 2023 02:22:43 +0500 Subject: [PATCH 03/25] add hyperlink --- translations/ru-RU/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 250d6712..1c9aa07d 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -641,3 +641,5 @@ br + br { ## Поддержка Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. + +[вернуться к оглавлению](#table-of-contents) From b217838100ee54c5c746acad72d4b06808b28ce2 Mon Sep 17 00:00:00 2001 From: Vladimir <49140851+VladimirCreator@users.noreply.github.com> Date: Tue, 20 Jun 2023 02:31:07 +0500 Subject: [PATCH 04/25] fix hyperlinks --- translations/ru-RU/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 1c9aa07d..d3d78c28 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -596,7 +596,7 @@ textarea { ### Использовать события указателя для управления событиями мыши -[События указателя] (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) позволяют указать, как мышь взаимодействует с элементом, который он трогает. Чтобы отключить событие указателя по умолчанию на кнопке, например: +[События указателя](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) позволяют указать, как мышь взаимодействует с элементом, который он трогает. Чтобы отключить событие указателя по умолчанию на кнопке, например: ```css button:disabled { @@ -612,7 +612,7 @@ button:disabled { ### Установите `display: none` на разрывы строк, используемые как интервалы -Как отметил [Гарри Робертс] (https://twitter.com/csswizardry/status/1170835532584235008), это может помочь пользователям CMS использовать дополнительные разрывы строк для пробелов: +Как отметил [Гарри Робертс](https://twitter.com/csswizardry/status/1170835532584235008), это может помочь пользователям CMS использовать дополнительные разрывы строк для пробелов: ```css br + br { From 1ecb45ec480219ffbf5dea528eabb34997b04aa4 Mon Sep 17 00:00:00 2001 From: Raymond Adams <102918860+Raymond-Adams@users.noreply.github.com> Date: Tue, 27 Jun 2023 08:16:49 -0700 Subject: [PATCH 05/25] Update Form Element Font Tip --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 2fc40830..82b28b32 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ A collection of tips to help take your CSS skills pro. 1. [Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing) 1. [Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted) 1. [Use `:root` for Flexible Type](#use-root-for-flexible-type) -1. [Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience) +1. [Inherit `font` on Form Elements for a Better Mobile Experience](#inherit-font-on-form-elements-for-a-better-mobile-experience) 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) @@ -578,20 +578,20 @@ body { [back to table of contents](#table-of-contents) -### Set `font-size` on Form Elements for a Better Mobile Experience +### Inherit `font` on Form Elements for a Better Mobile Experience -To avoid mobile browsers (iOS Safari, _et al_.) from zooming in on HTML form elements when a `` drop-down is tapped, and to mitigate styling inconsistencies across browsers, set the `font` rule to `inherit`: ```css -input[type="text"], -input[type="number"], +input, +button, select, textarea { - font-size: 16px; + font: inherit; } ``` -:dancer: +Learn more in [MDN's guide to styling web forms](https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms). [back to table of contents](#table-of-contents) From 28d8cf237aad649acabaf5f8b1cae5ebafadb2bc Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 28 Dec 2023 11:58:38 -0500 Subject: [PATCH 06/25] Add :is() pseudo-class tip --- README.md | 52 +++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 53b6ede2..8f03ab28 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,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. [Control Specificity Better With `:is()`](#control-specificity-better-with-is) ### Use a CSS Reset @@ -63,7 +64,7 @@ CSS resets help enforce style consistency across different browsers with a clean Now elements will be stripped of margins and padding, and `box-sizing` lets you manage layouts with the CSS box model. -#### [Demo](http://codepen.io/AllThingsSmitty/pen/kkrkLL) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL) **Note:** 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. @@ -151,7 +152,7 @@ Instead of putting on the border... Here, the CSS selector is read as a human would describe it. -#### [Demo](http://codepen.io/AllThingsSmitty/pen/LkymvO) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/LkymvO) [back to table of contents](#table-of-contents) @@ -194,7 +195,7 @@ body { This way textual elements can inherit from `body` easily. -#### [Demo](http://codepen.io/AllThingsSmitty/pen/VjbdYd) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/VjbdYd) [back to table of contents](#table-of-contents) @@ -232,10 +233,7 @@ body { } body { - -webkit-align-items: center; - -ms-flex-align: center; align-items: center; - display: -webkit-flex; display: flex; } ``` @@ -256,7 +254,7 @@ Want to center something else? Vertically, horizontally...anything, anytime, any **Note:** Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11. -#### [Demo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ) [back to table of contents](#table-of-contents) @@ -302,7 +300,7 @@ li:not(:nth-child(-n+3)) { } ``` -#### [Demo](http://codepen.io/AllThingsSmitty/pen/WxjKZp) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/WxjKZp) [back to table of contents](#table-of-contents) @@ -344,7 +342,7 @@ In this example, all elements in the flow of the document that follow other elem 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](http://codepen.io/AllThingsSmitty/pen/grRvWq) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq) [back to table of contents](#table-of-contents) @@ -383,7 +381,7 @@ Tables can be a pain to work with. Try using `table-layout: fixed` to keep cells Pain-free table layouts. -#### [Demo](http://codepen.io/AllThingsSmitty/pen/jALALm) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALALm) [back to table of contents](#table-of-contents) @@ -422,7 +420,7 @@ That's pretty 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. -#### [Demo](http://codepen.io/AllThingsSmitty/pen/zBzXRx) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx) [back to table of contents](#table-of-contents) @@ -466,7 +464,7 @@ To create a box with an intrinsic ratio, all you need to do is apply top or bott Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1). -#### [Demo](http://codepen.io/AllThingsSmitty/pen/jALZvE) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/jALZvE) [back to table of contents](#table-of-contents) @@ -573,7 +571,7 @@ body { } ``` -#### [Demo](http://codepen.io/AllThingsSmitty/pen/XKgOkR) +#### [Demo](https://codepen.io/AllThingsSmitty/pen/XKgOkR) [back to table of contents](#table-of-contents) @@ -640,6 +638,34 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei [back to table of contents](#table-of-contents) +### Control Specificity Better with `:is()` + +The `:is()` pseudo-class is used to target multiple selectors at onece, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form. + +```css +:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { + color: green; +} +``` + +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 { + color: green; +} +``` + +#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) + +**Note:** The `:is()` pseudo-class isn't supported in IE11. + +[back to table of contents](#table-of-contents) + + ## Support Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. From c15890681d548fe1482b5696c5ad6d9a6740dc75 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 28 Dec 2023 12:06:39 -0500 Subject: [PATCH 07/25] Change order --- README.md | 58 +++++++++++++++++++++++++++---------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 8f03ab28..b770fc19 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ A collection of tips to help take your CSS skills pro. 1. [Equal-Width Table Cells](#equal-width-table-cells) 1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox) 1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links) +1. [Control Specificity Better With `:is()`](#control-specificity-better-with-is) 1. [Style "Default" Links](#style-default-links) 1. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes) 1. [Style Broken Images](#style-broken-images) @@ -45,7 +46,6 @@ 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. [Control Specificity Better With `:is()`](#control-specificity-better-with-is) ### Use a CSS Reset @@ -425,6 +425,34 @@ That's pretty convenient. [back to table of contents](#table-of-contents) +### Control Specificity Better with `:is()` + +The `:is()` pseudo-class is used to target multiple selectors at onece, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form. + +```css +:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { + color: green; +} +``` + +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 { + color: green; +} +``` + +#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) + +**Note:** The `:is()` pseudo-class isn't supported in IE11. + +[back to table of contents](#table-of-contents) + + ### Style "Default" Links Add a style for "default" links: @@ -638,34 +666,6 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei [back to table of contents](#table-of-contents) -### Control Specificity Better with `:is()` - -The `:is()` pseudo-class is used to target multiple selectors at onece, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form. - -```css -:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { - color: green; -} -``` - -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 { - color: green; -} -``` - -#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) - -**Note:** The `:is()` pseudo-class isn't supported in IE11. - -[back to table of contents](#table-of-contents) - - ## Support Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. From 46fc674ad012ebe147717caced58d27f0c7951af Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 1 Jan 2024 19:24:44 -0500 Subject: [PATCH 08/25] Minor edit --- CODE-OF-CONDUCT.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CODE-OF-CONDUCT.md b/CODE-OF-CONDUCT.md index 1dca52b9..456fae5b 100644 --- a/CODE-OF-CONDUCT.md +++ b/CODE-OF-CONDUCT.md @@ -19,6 +19,6 @@ By adopting this Code of Conduct, project maintainers commit themselves to fairl This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting a project maintainer at mjsmithme@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident. +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project maintainer at mjsmithme@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident. This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.3.0, available at [http://contributor-covenant.org/version/1/3/0/](http://contributor-covenant.org/version/1/3/0/). \ No newline at end of file From 3eebdd01ce5553d578790be47cb775a2cdc18fcd Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 2 Jan 2024 20:08:09 -0500 Subject: [PATCH 09/25] Add aspect-ratio tip --- README.md | 47 +++++++++++++++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index b770fc19..7e3a9b9f 100644 --- a/README.md +++ b/README.md @@ -23,10 +23,11 @@ A collection of tips to help take your CSS skills pro. 1. [Inherit `box-sizing`](#inherit-box-sizing) 1. [Use `unset` Instead of Resetting All Properties](#use-unset-instead-of-resetting-all-properties) 1. [Use `:not()` to Apply/Unapply Borders on Navigation](#use-not-to-applyunapply-borders-on-navigation) -1. [Check If Font Is Installed Locally](#check-if-font-is-installed-locally) +1. [Check if Font Is Installed Locally](#check-if-font-is-installed-locally) 1. [Add `line-height` to `body`](#add-line-height-to-body) 1. [Set `:focus` for Form Elements](#set-focus-for-form-elements) 1. [Vertically-Center Anything](#vertically-center-anything) +1. [Use `aspect-ratio` Instead of Height/Width](#use-aspect-ratio-instead-of-heightwidth) 1. [Comma-Separated Lists](#comma-separated-lists) 1. [Select Items Using Negative `nth-child`](#select-items-using-negative-nth-child) 1. [Use SVG for Icons](#use-svg-for-icons) @@ -66,7 +67,7 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you #### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL) -**Note:** 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. +⚠️ **Note:** 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) @@ -117,7 +118,7 @@ button { } ``` -**Note:** the `all` and `unset` shorthand isn't supported in IE11. +⚠️ **Note:** the `all` and `unset` keywords aren't supported in IE11. [back to table of contents](#table-of-contents) @@ -157,7 +158,7 @@ Here, the CSS selector is read as a human would describe it. [back to table of contents](#table-of-contents) -### Check If Font Is Installed Locally +### Check if Font Is Installed Locally You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too. @@ -249,13 +250,31 @@ body { } ``` - Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that. -**Note:** Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11. - #### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ) +⚠️ **Note:** Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11. + +[back to table of contents](#table-of-contents) + + +### Use `aspect-ratio` Instead of Height/Width + +The `aspect-radio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. + +```css +img { + aspect-ratio: 16 / 9; /* width / height */ +} +``` + +Learn more about the `aspect-ratio` property in this [web.dev post](https://web.dev/articles/aspect-ratio). + +#### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) + +⚠️ **Note:** `aspect-ratio` isn't supported in IE11. + [back to table of contents](#table-of-contents) @@ -271,7 +290,7 @@ ul > li:not(:last-child)::after { 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. +⚠️ **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) @@ -418,10 +437,10 @@ a[href^="http"]:empty::before { That's pretty 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. - #### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx) +⚠️ **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) @@ -448,7 +467,7 @@ nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { #### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) -**Note:** The `:is()` pseudo-class isn't supported in IE11. +⚠️ **Note:** The `:is()` pseudo-class isn't supported in IE11. [back to table of contents](#table-of-contents) @@ -530,7 +549,7 @@ img::after { } ``` -Learn more about styling for this pattern in [Ire Aderinokun](https://github.com/ireade/)'s [original post](http://bitsofco.de/styling-broken-images/). +Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/). [back to table of contents](#table-of-contents) @@ -661,7 +680,7 @@ 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., `

`. +⚠️ **Note:** Keep in mind that elements with whitespace aren't considered empty, e.g., `

`. [back to table of contents](#table-of-contents) @@ -675,7 +694,7 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. ## 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 may not include all the tips listed on the main README file. +⚠️ **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) From a13b9be66489cc8351587009735b2e97aa4d219a Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 4 Jan 2024 09:04:11 -0500 Subject: [PATCH 10/25] Update tip --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7e3a9b9f..bf5022bb 100644 --- a/README.md +++ b/README.md @@ -261,19 +261,21 @@ Want to center something else? Vertically, horizontally...anything, anytime, any ### Use `aspect-ratio` Instead of Height/Width -The `aspect-radio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. +The `aspect-radio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. Use `object-fit` with it to prevent disrupting the layout if the height/width values of images changes. ```css img { aspect-ratio: 16 / 9; /* width / height */ + object-fit: cover; } ``` + Learn more about the `aspect-ratio` property in this [web.dev post](https://web.dev/articles/aspect-ratio). #### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) -⚠️ **Note:** `aspect-ratio` isn't supported in IE11. +⚠️ **Note:** `aspect-ratio` and `object-fit` aren't supported in IE11. [back to table of contents](#table-of-contents) From 5a4195ab361566b389e52857754b879c9cf2d1b9 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 8 Jan 2024 13:25:55 -0500 Subject: [PATCH 11/25] Small update --- README.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index bf5022bb..1d5c528a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -

+

light bulb icon -

+
# CSS Protips [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) @@ -51,7 +51,7 @@ A collection of tips to help take your CSS skills pro. ### Use a CSS Reset -CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. You can use a CSS reset library like [Normalize](http://necolas.github.io/normalize.css/), _et al._, or you can use a more simplified reset approach: +CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. There are plenty of reset patterns to find, or you can use a more simplified reset approach: ```css *, @@ -230,12 +230,12 @@ No, it's not black magic, you really can center elements vertically. You can do html, body { height: 100%; - margin: 0; } body { align-items: center; display: flex; + justify-content: center; } ``` @@ -245,8 +245,7 @@ body { body { display: grid; height: 100vh; - margin: 0; - place-items: center center; + place-items: center; } ``` @@ -270,7 +269,6 @@ img { } ``` - Learn more about the `aspect-ratio` property in this [web.dev post](https://web.dev/articles/aspect-ratio). #### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) From 3ea174f68e25da622106def0eabc1295c560968e Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 9 Jan 2024 17:55:08 -0500 Subject: [PATCH 12/25] Note update --- README.md | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 1d5c528a..de70945e 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,8 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you #### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL) -⚠️ **Note:** 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. +> [!NOTE] +> 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) @@ -118,7 +119,8 @@ button { } ``` -⚠️ **Note:** the `all` and `unset` keywords aren't supported in IE11. +> [!NOTE] +> The `all` and `unset` keywords aren't supported in IE11. [back to table of contents](#table-of-contents) @@ -253,14 +255,15 @@ Want to center something else? Vertically, horizontally...anything, anytime, any #### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ) -⚠️ **Note:** Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11. +> [!NOTE] +> Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11. [back to table of contents](#table-of-contents) ### Use `aspect-ratio` Instead of Height/Width -The `aspect-radio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. Use `object-fit` with it to prevent disrupting the layout if the height/width values of images changes. +The `aspect-ratio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. Use `object-fit` with it to prevent disrupting the layout if the height/width values of images changes. ```css img { @@ -273,7 +276,8 @@ Learn more about the `aspect-ratio` property in this [web.dev post](https://web. #### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) -⚠️ **Note:** `aspect-ratio` and `object-fit` aren't supported in IE11. +> [!NOTE] +> `aspect-ratio` and `object-fit` aren't supported in IE11. [back to table of contents](#table-of-contents) @@ -290,7 +294,8 @@ ul > li:not(:last-child)::after { 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. +> [!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) @@ -336,7 +341,8 @@ There's no reason not to use SVG for icons: SVG scales well for all resolution types and is supported in all browsers [back to IE9](http://caniuse.com/#search=svg). Ditch your .png, .jpg, or .gif-jif-whatev files. -**Note:** If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility: +> [!NOTE] +> If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility: ```css .no-svg .icon-only::after { @@ -439,7 +445,8 @@ That's pretty convenient. #### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx) -⚠️ **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. +> [!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) @@ -467,7 +474,8 @@ nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { #### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) -⚠️ **Note:** The `:is()` pseudo-class isn't supported in IE11. +> [!NOTE] +> The `:is()` pseudo-class isn't supported in IE11. [back to table of contents](#table-of-contents) @@ -680,7 +688,8 @@ 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., `

`. +> [!NOTE] +> Keep in mind that elements with whitespace aren't considered empty, e.g., `

`. [back to table of contents](#table-of-contents) @@ -694,7 +703,8 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. ## 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. +> [!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) From 57d10d61a0ab591b28633648f2d2de783d2f724e Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Wed, 10 Jan 2024 16:13:57 -0500 Subject: [PATCH 13/25] Syntax edit --- README.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index de70945e..83161c10 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you #### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL) -> [!NOTE] +> [!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) @@ -251,7 +251,8 @@ body { } ``` -Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that. +> [!TIP] +> Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that. #### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ) @@ -365,7 +366,8 @@ 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`. -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*. +> [!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*. #### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq) @@ -441,7 +443,7 @@ a[href^="http"]:empty::before { } ``` -That's pretty convenient. +That's really convenient. #### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx) @@ -557,7 +559,8 @@ img::after { } ``` -Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/). +> [!TIP] +> Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/). [back to table of contents](#table-of-contents) @@ -644,8 +647,6 @@ textarea { } ``` -:dancer: - [back to table of contents](#table-of-contents) From ebccf1a7c464d5ab8834533bc975f342bf4ca5f4 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Mon, 22 Jan 2024 12:04:08 -0500 Subject: [PATCH 14/25] Minor edit, remove translation request --- CONTRIBUTING.md | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c3498a63..47d5e1ec 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,7 +13,7 @@ Please note that this project is released with a [Contributor Code of Conduct](C Please ensure your pull request adheres to the following guidelines: -* Search open and closed PR's to avoid duplicate suggestions. +* 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/). @@ -29,16 +29,6 @@ Please ensure your pull request adheres to the following guidelines: Thank you for your suggestions! -### Language Translations - -If you fluently speak another language and want to contribute by translating this list into that language, please submit a PR using the following guidelines: - -* Add a new folder to the [`translations`](https://github.com/AllThingsSmitty/css-protips/tree/master/translations) folder -* The new folder should be labeled the language culture name, e.g, `es-ES`, `ru-RU`, `zh-CN`, etc. - -Additionally, feel free to review already translated content for accuracy. - - ## 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 guidlines 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 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 From 291354b56bf894a7eb8a21bb351ff9e40b4e1f4e Mon Sep 17 00:00:00 2001 From: Fernanda Monroe Date: Mon, 19 Feb 2024 18:27:12 -0300 Subject: [PATCH 15/25] Updated translations and fixed typos. --- translations/pt-BR/README.md | 73 ++++++++++++++++++++++++++++++++++-- 1 file changed, 69 insertions(+), 4 deletions(-) diff --git a/translations/pt-BR/README.md b/translations/pt-BR/README.md index e8fb02db..ea08f11c 100644 --- a/translations/pt-BR/README.md +++ b/translations/pt-BR/README.md @@ -1,6 +1,6 @@ -

- light bulb icon -

+
+ light bulb icon +
# CSS Protips [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) @@ -13,7 +13,7 @@ Uma coleção de dicas para aumentar suas habilidades no CSS. * [Protips](#protips) * [Suporte](#suporte) -* [Contribuições](../../CONTRIBUTING.md) +* [Guia de Contribuições](../../CONTRIBUTING.md) ## Protips @@ -26,6 +26,7 @@ Uma coleção de dicas para aumentar suas habilidades no CSS. 1. [Defina o `line-height` no `body`](#defina-o-line-height-no-body) 1. [Definir `:focus` para elementos de formulário](#definir-focus-para-elementos-de-formulário) 1. [Alinhe Elementos Verticalmente](#alinhe-elementos-verticalmente) +1. [Use `aspect-ratio` ao invés de Height/Width](#use-aspect-ratio-ao-invés-de-heightwidth) 1. [Listas Separadas por Vírgula](#listas-separadas-por-vírgula) 1. [Selecione Itens Usando `nth-child` Negativo](#selecione-itens-usando-nth-child-negativo) 1. [Ícones SVG](#Ícones-svg) @@ -34,6 +35,7 @@ Uma coleção de dicas para aumentar suas habilidades no CSS. 1. [Tabelas com Células de Tamanho Igual](#tabelas-com-células-de-tamanho-igual) 1. [Esqueça as "Margin Hacks", use Flexbox](#esqueça-as-margin-hacks-use-flexbox) 1. [Use Seletores de Atributo em Links Vazios](#use-seletores-de-atributo-em-links-vazios) +1. [Controle Melhor a Especificidade Com `:is()`](#controle-melhor-a-especificidade-com-is) 1. [Estilize Links "Default"](#estilize-links-default) 1. [Div com Proporção de Tela Fixa](#div-com-proporção-de-tela-fixa) 1. [Estilize Imagens Quebradas](#estilize-imagens-quebradas) @@ -43,6 +45,7 @@ Uma coleção de dicas para aumentar suas habilidades no CSS. 1. [Defina `font-size` em Elementos de Formulário para uma Melhor Experiência Mobile](#defina-font-size-em-elementos-de-formulário-para-uma-melhor-experiência-mobile) 1. [Use eventos de ponteiro para controlar eventos do mouse](#use-eventos-de-ponteiro-para-controlar-eventos-do-mouse) 1. [Definir `display: none` em quebras de linha usadas como espaçamento](#definir-display-none-em-quebras-de-linha-usadas-como-espaçamento) +1. [Use `:empty` para Esconder Eelementos HTML Vazios](#use-empty-para-esconder-elementos-html-vazios) ### Use um Reset CSS @@ -256,6 +259,25 @@ Isso não resolveu seu problema? O site CSS-Tricks tem [um guia completo](https: [voltar ao índice](#Índice) +### Use `aspect-ratio` ao Invés de Height/Width + +A propriedade `aspect-ratio` permite que você dimensione elementos facilmente e mantem a proporção largura-altura (width-to-height) consistênte. Isso é incrivelmente útil em web design responsivo para prevenir alterações no layout. Use `object-fit` com isso para prevenir quebras no layout se os valores de altura/largura das images mudar. + +```css +img { + aspect-ratio: 16 / 9; /* width / height */ + object-fit: cover; +} +``` + +Aprenda mais sobre a propriedade `aspect-ratio` neste [web.dev post](https://web.dev/articles/aspect-ratio). + +#### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) + +> [!NOTA] +> `aspect-ratio` e `object-fit` não são suportados em IE11. + +[voltar ao índice](#Índice) ### Listas Separadas por Vírgula @@ -422,6 +444,33 @@ Mão na roda. [voltar ao índice](#Índice) +### Controle Melhor a Especificidade Com `:is()` + +A pseudoclasse `:is()` é usada para marca vários seletores de uma só vez, reduzindo a redundância e melhorando a legibilidade do código. Isso é extremamente útil para escrever seletores grandes de uma forma mais compacta. + +```css +:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { + color: green; +} +``` + +O conjunto de regras acima é equivalente às seguintes regras do seletor de números... + +```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; +} +``` + +#### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) + +> [!NOTA] +> A pseudoclasse `:is()` não é suportada em IE11. + +[voltar ao índice](#Índice) ### Estilize Links "Default" @@ -619,7 +668,23 @@ br + br { [voltar ao índice](#Índice) +### Use `:empty` para Esconder Elementos HTML Vazios + +Se você tem elementos HTML vazios, ou seja, o conteúdo ainda tem que ser definido ou pela CMS ou injetado dinamicamente (e.g., `

`) e está criando espaços indesejáveis no seu layout, use a pseudoclasse `:empty` para esconder os elementos no layout. + +```css +:empty { + display: none; +} +``` + +> [!NOTA] +> Lembre-se que os elementos com espaços em branco não são considerados vazios, e.g., `

`. + +[voltar ao índice](#Índice) ## Suporte Versões atuais do Chrome, Firefox, Safari, Opera, Edge, e IE11. + +[voltar ao índice](#Índice) \ No newline at end of file From b1564f07c32c5108420bb439bc047e16aa638d4b Mon Sep 17 00:00:00 2001 From: Fernanda Monroe Date: Mon, 19 Feb 2024 18:27:43 -0300 Subject: [PATCH 16/25] Fixed typos. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 83161c10..8a5ab31e 100644 --- a/README.md +++ b/README.md @@ -455,7 +455,7 @@ That's really convenient. ### Control Specificity Better with `:is()` -The `:is()` pseudo-class is used to target multiple selectors at onece, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form. +The `:is()` pseudo-class is used to target multiple selectors at once, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form. ```css :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { From 5e84d5375366104a35107d76ecf155b41264d970 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 28 Mar 2024 11:26:39 -0400 Subject: [PATCH 17/25] Remove IE11 --- README.md | 14 +------------- translations/de-DE/README.md | 6 +----- translations/es-ES/README.md | 6 +----- translations/fr-FR/README.md | 6 +----- translations/gr-GR/README.md | 6 +----- translations/gu-IND/README.md | 4 +--- translations/it-IT/README.md | 6 +----- translations/ja-JP/README.md | 6 +----- translations/ko-KR/readme.md | 7 +------ translations/pl-PL/README.md | 6 +----- translations/pt-BR/README.md | 6 +----- translations/pt-PT/README.md | 6 +----- translations/ru-RU/README.md | 6 +----- translations/vn-VN/README.md | 6 +----- translations/zh-CN/README.md | 6 +----- translations/zh-TW/README.md | 6 +----- 16 files changed, 16 insertions(+), 87 deletions(-) diff --git a/README.md b/README.md index 83161c10..da02b7fd 100644 --- a/README.md +++ b/README.md @@ -119,9 +119,6 @@ button { } ``` -> [!NOTE] -> The `all` and `unset` keywords aren't supported in IE11. - [back to table of contents](#table-of-contents) @@ -256,9 +253,6 @@ body { #### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ) -> [!NOTE] -> Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11. - [back to table of contents](#table-of-contents) @@ -277,9 +271,6 @@ Learn more about the `aspect-ratio` property in this [web.dev post](https://web. #### [Demo](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) -> [!NOTE] -> `aspect-ratio` and `object-fit` aren't supported in IE11. - [back to table of contents](#table-of-contents) @@ -476,9 +467,6 @@ nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { #### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) -> [!NOTE] -> The `:is()` pseudo-class isn't supported in IE11. - [back to table of contents](#table-of-contents) @@ -697,7 +685,7 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei ## Support -Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. +Current versions of Chrome, Firefox, Safari, and Edge. [back to table of contents](#table-of-contents) diff --git a/translations/de-DE/README.md b/translations/de-DE/README.md index aa6b92a4..821701a2 100644 --- a/translations/de-DE/README.md +++ b/translations/de-DE/README.md @@ -114,8 +114,6 @@ button { } ``` -**Hinweis:** Die Kurzform `all` und "unset" wird in IE11 nicht unterstützt. - [zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis) @@ -254,8 +252,6 @@ body { Möchtest du etwas anderes zentrieren? Vertikal, horizontal… alles, jederzeit, überall? CSS-Tricks hat [eine schöne Ausarbeitung](https://css-tricks.com/centering-css-complete-guide/) über all dies. -**Hinweis:** Passe auf das [fehlerhafte Verhalten](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) von Flexbox in IE11 auf. - #### [Demo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [zurück zum Inhaltsverzeichnis](#inhaltsverzeichnis) @@ -625,4 +621,4 @@ br + br { ## Unterstützung -Aktuelle Versionen von Chrome, Firefox, Safari, Opera, Edge und IE11. \ No newline at end of file +Aktuelle Versionen von Chrome, Firefox, Safari, und Edge. \ No newline at end of file diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md index 77e2a9dc..20c373d6 100644 --- a/translations/es-ES/README.md +++ b/translations/es-ES/README.md @@ -115,8 +115,6 @@ button { } ``` -**Nota:** la abreviatura `all` y` unset` no es compatible con IE11. - [volver al índice de contenidos](#tabla-de-contenido) @@ -253,8 +251,6 @@ body { ¿Quieres centrar algo más? Vertical, horizontal… cualquier cosa, en cualquier momento y en cualquier lugar? CSS-Tricks tiene [un bonito artículo](https://css-tricks.com/centering-css-complete-guide/) para hacer todo eso. -**Nota:** mira algunos [comportamientos erróneos](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) de Flexbox en IE11. - #### [Demo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [volver al índice de contenidos](#tabla-de-contenido) @@ -639,4 +635,4 @@ br + br { ## Soporte -Las versiones actuales de Chrome, Firefox, Safari, Opera, Edge y IE11. +Las versiones actuales de Chrome, Firefox, Safari y Edge. diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md index de8424fc..c445c8c0 100644 --- a/translations/fr-FR/README.md +++ b/translations/fr-FR/README.md @@ -115,8 +115,6 @@ button { } ``` -**Remarque:** les raccourcis `all` et` unset` ne sont pas pris en charge dans IE11. - [retour à la table des matières](#table-des-matières) @@ -252,8 +250,6 @@ body { Vous voulez centrer autre chose ? Verticalement, horizontalement... quoi que ce soit, à tout moment, en tout lieu ? CSS-Tricks a [un article sympa](https://css-tricks.com/centering-css-complete-guide/) sur comment faire tout cela. -**Remarque:** Surveillez certains [comportement bogués](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) avec flexBox dans IE11. - #### [Démo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [retour à la table des matières](#table-des-matières) @@ -625,4 +621,4 @@ br + br { ## Prise en charge par les navigateurs -Les versions actuelles de Chrome, Firefox, Safari, Opera, Edge, et IE11. +Les versions actuelles de Chrome, Firefox, Safari, et Edge. diff --git a/translations/gr-GR/README.md b/translations/gr-GR/README.md index e3078d52..1f1ad625 100644 --- a/translations/gr-GR/README.md +++ b/translations/gr-GR/README.md @@ -114,8 +114,6 @@ button { } ``` -**Σημείωση:** η στενογραφία «all` και` unset` δεν υποστηρίζεται στο IE11. - [πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων) @@ -254,8 +252,6 @@ body { Θέλετε να κεντραρίσετε κάτι άλλο? Vertically, Κάθετα, οριζόντια...όπως θέλετε,όποτε θέλετε, παντού? Το CSS-Tricks έχει [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that. -**Σημείωση:** Προσοχή για ενδεχόμενη [buggy συμπεριφορά](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11. - #### [Demo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων) @@ -624,6 +620,6 @@ br + br { ## Υποστήριξη -Οι τωρινές εκδόσεις των Chrome, Firefox, Safari, Opera, Edge, καθώς και IE11. +Οι τωρινές εκδόσεις των Chrome, Firefox, Safari, καθώς και Edge. [πίσω στον πίνακα περιεχομένων](#πίνακας-περιεχομένων) diff --git a/translations/gu-IND/README.md b/translations/gu-IND/README.md index 73278557..f1d37d96 100644 --- a/translations/gu-IND/README.md +++ b/translations/gu-IND/README.md @@ -250,8 +250,6 @@ body { કેન્દ્ર માંગો છો કંઈક બીજું? વર્ટિકલ, આડા...કંઈપણ, કોઈપણ સમયે, ગમે ત્યાં? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on કરવાનું બધા કે. -**નોટ:** જુઓ કેટલાક માટે [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) સાથે flexbox માં IE11. - #### [પ્રદર્શન](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ) @@ -623,6 +621,6 @@ br + br { ## આધાર -વર્તમાન આવૃત્તિઓ of Chrome, Firefox, Safari, Opera, Edge, અને IE11. +વર્તમાન આવૃત્તિઓ of Chrome, Firefox, Safari, અને Edge. [સામગ્રીઓના કોષ્ટકમાં પાછા](#પ્રોપ્સ) diff --git a/translations/it-IT/README.md b/translations/it-IT/README.md index 7b03e423..49ef54e5 100644 --- a/translations/it-IT/README.md +++ b/translations/it-IT/README.md @@ -114,8 +114,6 @@ button { } ``` -**Nota:** la stenografia `all` e` unset` non è supportata in IE11. - [torna al sommario](#sommario) @@ -252,8 +250,6 @@ body { Vuoi centrare qualcos'altro? In verticale, in orizzontale... qualsiasi cosa, in qualsiasi momento ovunque? Su CSS-Tricks trovi [un ottimo articolo](https://css-tricks.com/centering-css-complete-guide/) a riguardo. -**Nota bene:** si verificano dei [comportamenti anomali](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) con flexbox e IE11. - #### [Dimostrazione](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [torna al sommario](#sommario) @@ -625,4 +621,4 @@ br + br { ## Supporto -Le attuali versioni di Chrome, Firefox, Safari, Opera, Edge ed IE11. \ No newline at end of file +Le attuali versioni di Chrome, Firefox, Safari, ed Edge. \ No newline at end of file diff --git a/translations/ja-JP/README.md b/translations/ja-JP/README.md index ab0d45aa..2ad307d9 100644 --- a/translations/ja-JP/README.md +++ b/translations/ja-JP/README.md @@ -127,8 +127,6 @@ button { } ``` -**備考:** IE11では `all`および` unset`の省略形はサポートされていません。 - [目次へ戻る](#table-of-contents) @@ -272,8 +270,6 @@ body { なんでも中央に揃いたいですか？ CSS-Tricks の[セントリングガイド](https://css-tricks.com/centering-css-complete-guide/) をチェックしてください。 -**備考:** IE11のFlexboxの [バグを気をつけてください](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) - #### [デモ](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [目次へ戻る](#table-of-contents) @@ -682,4 +678,4 @@ br + br { ## サポート -現在のChrome, Firefox, Safari, Opera と EdgeのバージョンとIE11. +現在のChrome, Firefox, Safari, のバージョンとEdge. diff --git a/translations/ko-KR/readme.md b/translations/ko-KR/readme.md index f1fdeb0e..2cd47c2d 100644 --- a/translations/ko-KR/readme.md +++ b/translations/ko-KR/readme.md @@ -125,8 +125,6 @@ button { } ``` -**Note:** `all` 및`unset` 속기는 IE11에서 지원되지 않습니다. - [목차로 돌아가기](#table-of-contents) @@ -259,11 +257,8 @@ body { } ``` - 무언가를 중앙으로 배치하고 싶으신가요? 가로로, 세로로 ...뭐든지, 어떤 때라도, 어디서든? CSS-Tricks의 [가이드](https://css-tricks.com/centering-css-complete-guide/)를 통해 그 모든 것을 해보세요! -**Note:** IE11의 Flexbox의 [버그를 주의해 주세요](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) - #### [데모](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [목차로 돌아가기](#table-of-contents) @@ -670,7 +665,7 @@ br + br { ## 지원 -최신 버전의 Chrome, Firefox, Safari, Opera, Edge, IE11에서 지원됩니다.. +최신 버전의 Chrome, Firefox, Safari, Edge에서 지원됩니다.. [목차로 돌아가기](#table-of-contents) diff --git a/translations/pl-PL/README.md b/translations/pl-PL/README.md index f9f09ec2..c2e9788d 100644 --- a/translations/pl-PL/README.md +++ b/translations/pl-PL/README.md @@ -111,8 +111,6 @@ button { } ``` -**Uwaga:** skróty `all` i `unset` nie są obsługiwane w IE11. - [powrót do spisu treści](#powrót-do-spisu-treści) @@ -249,8 +247,6 @@ body { Chcesz coś przenieść? Pionowo, poziomo... zawsze i wszędzie? Na CSS-Tricks znajdziesz [ciekawy artykuł](https://css-tricks.com/centering-css-complete-guide/) z dobrymi instrukcje na ten temat. -**Uwaga:** Uważaj na pewne [nieprawidłowe zachowanie](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) z Flexbox w IE11. - #### [Demonstracja](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [Powrót do spisu treści](#Powrót-do-spisu-treści) @@ -623,6 +619,6 @@ br + br { ## Wsparcie -Wersje aktualne Chrome, Firefox, Safari, Opera, Edge, and IE11. +Wersje aktualne Chrome, Firefox, Safari, e Edge. [Powrót do spisu treści](#Powrót-do-spisu-treści) \ No newline at end of file diff --git a/translations/pt-BR/README.md b/translations/pt-BR/README.md index e8fb02db..40695b70 100644 --- a/translations/pt-BR/README.md +++ b/translations/pt-BR/README.md @@ -113,8 +113,6 @@ button { } ``` -**Nota:** a abreviação `all` e` unset` não é compatível com o IE11. - [voltar ao índice](#Índice) @@ -250,8 +248,6 @@ body { Isso não resolveu seu problema? O site CSS-Tricks tem [um guia completo](https://css-tricks.com/centering-css-complete-guide/) de como centralizar elementos com CSS. -**Aviso:** Fique atento com os [bugs](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) quando utilizar flexbox no IE11. - #### [Exemplo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [voltar ao índice](#Índice) @@ -622,4 +618,4 @@ br + br { ## Suporte -Versões atuais do Chrome, Firefox, Safari, Opera, Edge, e IE11. +Versões atuais do Chrome, Firefox, Safari, e Edge. diff --git a/translations/pt-PT/README.md b/translations/pt-PT/README.md index 550ab4b4..f8af537e 100644 --- a/translations/pt-PT/README.md +++ b/translations/pt-PT/README.md @@ -114,8 +114,6 @@ button { } ``` -**Nota:** a abreviação `all` e` unset` não é compatível com o IE11. - [voltar ao índice](#Índice) @@ -251,8 +249,6 @@ body { Isto não resolveu o teu problema? O site CSS-Tricks tem [um guia completo](https://css-tricks.com/centering-css-complete-guide/) em como centralizar elementos com CSS. - **Aviso:** Fica atento aos [bugs](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) quando estás a utilizar a flexbox no IE11. - #### [Passeata](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [Regressar ao índice](#Índice) @@ -624,4 +620,4 @@ br + br { ## Suporte -Versões atuais do Chrome, Firefox, Safari, Opera, Edge, e IE11. +Versões atuais do Chrome, Firefox, Safari, e Edge. diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index d3d78c28..88c024e8 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -117,8 +117,6 @@ button { } ``` -**Примечание:** сокращенные обозначения `all` и `unset` не поддерживаются в IE11. - [вернуться к оглавлению](#table-of-contents) @@ -252,8 +250,6 @@ body { Хотите разместить по центру что-то еще? Вертикально, горизонтально...что угодно, в любое время и в любом месте? У нас есть [хорошая статья](https://css-tricks.com/centering-css-complete-guide/) которая научит всему этому. -**Примечание:** Будьте осторожны с некоторыми [багами](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) flexbox в IE11. - #### [Демо](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [вернуться к оглавлению](#table-of-contents) @@ -640,6 +636,6 @@ br + br { ## Поддержка -Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. +Текущие версии Chrome, Firefox, Safari, и Edge. [вернуться к оглавлению](#table-of-contents) diff --git a/translations/vn-VN/README.md b/translations/vn-VN/README.md index fcddc58c..04271192 100644 --- a/translations/vn-VN/README.md +++ b/translations/vn-VN/README.md @@ -115,8 +115,6 @@ button { } ``` -**Note:** tốc độ viết tắt `all` và` unset` không được hỗ trợ trong IE11. - [back to table of contents](#table-of-contents) @@ -253,8 +251,6 @@ body { Muốn căn giữa một cái gì đó khác? Theo chiều dọc,chiều ngang ... bất cứ điều gì, mọi lúc, mọi nơi? CSS-Tricks có [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) để làm được tất cả những điều đó. -**Note:** Xem một ít [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) với Flexbox trên IE11. - #### [Demo](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [back to table of contents](#table-of-contents) @@ -624,4 +620,4 @@ br + br { ## Support - versions hiện tại Chrome, Firefox, Safari, Opera, Edge, and IE11. + versions hiện tại Chrome, Firefox, Safari, và Edge. diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md index 619d4b00..e9be9286 100644 --- a/translations/zh-CN/README.md +++ b/translations/zh-CN/README.md @@ -117,8 +117,6 @@ button { } ``` -**注意：** IE11不支持`all`和`unset`的简写。 - [回目录](#目录) @@ -254,8 +252,6 @@ body { 这还不够？垂直方向，水平方向？任何元素，任何时间，任何地点？CSS-Tricks [有篇好文](https://css-tricks.com/centering-css-complete-guide/) 讲到了各种居中的技巧。 -**注意：** IE11 对 flexbox 的支持[有点 bug](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items)。 - #### [演示](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [回目录](#目录) @@ -642,4 +638,4 @@ br + br { ### 支持情况 -这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。 +这些技巧适用于最新版的 Chrome, Firefox, Safari, 以及 Edge。 diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index 7e07c033..e52217b5 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -115,8 +115,6 @@ button { } ``` -**注意：** IE11不支持`all`和`unset`的简写。 - [回到目錄](#table-of-contents) ### 使用 `:not()` 選擇器來決定表單是否顯示邊框 @@ -251,8 +249,6 @@ body { 還想居中排版其他的東西？垂直居中、水平居中、... 任何事、任何時間、任何地點？CSS-Tricks [有篇不錯的文章](https://css-tricks.com/centering-css-complete-guide/) 提到了各種居中排版的技巧。 -**注意：** IE11 的 flexbox [有些怪怪的行為](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) 要注意。 - #### [示範](http://codepen.io/AllThingsSmitty/pen/GqmGqZ) [回到目錄](#table-of-contents) @@ -609,4 +605,4 @@ br + br { ## 瀏覽器支援度 -以上技巧支援 Chrome, Firefox, Safari, Opera, Edge 最新版本與 IE11 瀏覽器。 +以上技巧支援 Chrome, Firefox, Safari, 最新版本與 Edge 瀏覽器。 From 63ae18460261587048b0e915766fd51088ff685b Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 28 Mar 2024 11:35:42 -0400 Subject: [PATCH 18/25] Merge fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index da02b7fd..a6353d96 100644 --- a/README.md +++ b/README.md @@ -446,7 +446,7 @@ That's really convenient. ### Control Specificity Better with `:is()` -The `:is()` pseudo-class is used to target multiple selectors at onece, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form. +The `:is()` pseudo-class is used to target multiple selectors at once, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form. ```css :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { From 356a1989fb2de85c54739577749ccead429b4df3 Mon Sep 17 00:00:00 2001 From: Vitaliy VVS Date: Fri, 27 Sep 2024 20:29:19 +0300 Subject: [PATCH 19/25] Update new ru-RU translations --- translations/ru-RU/README.md | 52 +++++++++++++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 3 deletions(-) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 88c024e8..db8c5338 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 { [вернуться к оглавлению](#table-of-contents) -### Выровнять все по вертикали +### Выровнять всё по вертикали -Нет, это не черная магия, вы действительно можете расположить элементы по центру по вертикали: +Нет, это не чёрная магия, вы действительно можете расположить элементы по центру по вертикали: ```css html, @@ -255,6 +257,24 @@ body { [вернуться к оглавлению](#table-of-contents) +### Используйте `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/) + +[вернуться к оглавлению](#table-of-contents) + + ### Списки, разделенные запятыми Сделайте список похожим на настоящий, разделенный запятыми список: @@ -421,6 +441,32 @@ a[href^="http"]:empty::before { [вернуться к оглавлению](#table-of-contents) +### Управляйте специфичностью лучше, с помощью `: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) + + ### Стиль "по умолчанию" для ссылок Добавьте для ссылок стиль "по умолчанию": From a1eed802655e41362087eefafaf288925c120335 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 21 Feb 2025 09:47:36 -0500 Subject: [PATCH 20/25] Minor update --- README.md | 163 +++++++++++++++++++++--------------------------------- 1 file changed, 62 insertions(+), 101 deletions(-) diff --git a/README.md b/README.md index a6353d96..2054c035 100644 --- a/README.md +++ b/README.md @@ -8,14 +8,12 @@ A collection of tips to help take your CSS skills pro. > For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/). - ## Table of Contents -* [Protips](#protips) -* [Support](#support) -* [Translations](#translations) -* [Contribution Guidelines](CONTRIBUTING.md) - +- [Protips](#protips) +- [Support](#support) +- [Translations](#translations) +- [Contribution Guidelines](CONTRIBUTING.md) ## Protips @@ -48,7 +46,6 @@ A collection of tips to help take your CSS skills pro. 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) - ### Use a CSS Reset CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. There are plenty of reset patterns to find, or you can use a more simplified reset approach: @@ -68,10 +65,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](#table-of-contents) ### Inherit `box-sizing` @@ -93,8 +89,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](#table-of-contents) ### Use `unset` Instead of Resetting All Properties @@ -119,8 +114,7 @@ button { } ``` -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Use `:not()` to Apply/Unapply Borders on Navigation @@ -154,8 +148,7 @@ Here, the CSS selector is read as a human would describe it. #### [Demo](https://codepen.io/AllThingsSmitty/pen/LkymvO) -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Check if Font Is Installed Locally @@ -165,12 +158,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 +169,7 @@ code { H/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argyleink/pen/VwYJpgR). -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Add `line-height` to `body` @@ -197,8 +185,7 @@ This way textual elements can inherit from `body` easily. #### [Demo](https://codepen.io/AllThingsSmitty/pen/VjbdYd) -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Set `:focus` for Form Elements @@ -212,14 +199,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](#table-of-contents) ### Vertically-Center Anything @@ -253,8 +239,7 @@ body { #### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ) -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Use `aspect-ratio` Instead of Height/Width @@ -271,8 +256,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](#table-of-contents) ### Comma-Separated Lists @@ -289,8 +273,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](#table-of-contents) ### Select Items Using Negative `nth-child` @@ -302,7 +285,7 @@ li { } /* select items 1 through 3 and display them */ -li:nth-child(-n+3) { +li:nth-child(-n + 3) { display: block; } ``` @@ -311,15 +294,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) -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Use SVG for Icons @@ -342,8 +324,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](#table-of-contents) ### Use the "Lobotomized Owl" Selector @@ -358,12 +339,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](#table-of-contents) ### Use `max-height` for Pure CSS Sliders @@ -384,8 +364,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](#table-of-contents) ### Equal-Width Table Cells @@ -401,8 +380,7 @@ Pain-free table layouts. #### [Demo](https://codepen.io/AllThingsSmitty/pen/jALALm) -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Get Rid of Margin Hacks With Flexbox @@ -421,8 +399,7 @@ When working with column gutters you can get rid of `nth-`, `first-`, and `last- Now column gutters always appear evenly-spaced. -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Use Attribute Selectors with Empty Links @@ -441,8 +418,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. -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Control Specificity Better with `:is()` @@ -457,18 +433,14 @@ 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) -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Style "Default" Links @@ -483,8 +455,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. -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Intrinsic Ratio Boxes @@ -511,8 +482,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) -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Style Broken Images @@ -550,8 +520,7 @@ img::after { > [!TIP] > Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/). -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Use `rem` for Global Sizing; Use `em` for Local Sizing @@ -575,14 +544,13 @@ article { } aside .module { - font-size: .9rem; + font-size: 0.9rem; } ``` Now each module becomes compartmentalized and easier to style, more maintainable, and flexible. -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Hide Autoplay Videos That Aren't Muted @@ -596,8 +564,7 @@ video[autoplay]:not([muted]) { Once again, we're taking advantage of using the [`:not()`](#use-not-to-applyunapply-borders-on-navigation) pseudo-class. -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Use `:root` for Flexible Type @@ -605,7 +572,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 +586,7 @@ body { #### [Demo](https://codepen.io/AllThingsSmitty/pen/XKgOkR) -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Set `font-size` on Form Elements for a Better Mobile Experience @@ -635,8 +601,7 @@ textarea { } ``` -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Use Pointer Events to Control Mouse Events @@ -644,15 +609,14 @@ textarea { ```css button:disabled { - opacity: .5; + opacity: 0.5; pointer-events: none; } ``` It's that simple. -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### Set `display: none` on Line Breaks Used as Spacing @@ -664,12 +628,11 @@ br + br { } ``` -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ### 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 +643,33 @@ 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., `

`. -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ## Support Current versions of Chrome, Firefox, Safari, and Edge. -[back to table of contents](#table-of-contents) - +[Back to top](#table-of-contents) ## 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) - -[back to table of contents](#table-of-contents) +- [简体中文](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) + +[Back to top](#table-of-contents) From 4d0dbacb69667f5251ce3839eeb02cd7de530e7d Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Fri, 28 Feb 2025 14:08:03 -0500 Subject: [PATCH 21/25] Badge update --- README.md | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2054c035..5b6eb3e6 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,11 @@ light bulb icon -# CSS Protips [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) +# CSS Protips [![Awesome](https://awesome.re/badge-flat.svg)](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/). ## Table of Contents @@ -433,7 +434,30 @@ 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; } ``` From 90869a5fb46f354e9efde1ec62eed3c7efeb51ab Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 13 Mar 2025 20:47:51 -0400 Subject: [PATCH 22/25] Add margin-inline tip --- README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/README.md b/README.md index 5b6eb3e6..0d313062 100644 --- a/README.md +++ b/README.md @@ -46,6 +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 @@ -675,6 +676,28 @@ Current versions of Chrome, Firefox, Safari, and Edge. [Back to top](#table-of-contents) +### 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) + +[Back to top](#table-of-contents) + ## Translations > [!NOTE] From b1aebffe925b21f5b659db6564c9967a14ed9071 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 13 Mar 2025 20:48:01 -0400 Subject: [PATCH 23/25] Minor update --- CONTRIBUTING.md | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 47d5e1ec..90eb6bac 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 - [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 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. From 001db6445ac9ddcbb8826b3a22c9ce2c12b97f38 Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Tue, 18 Mar 2025 16:30:47 -0400 Subject: [PATCH 24/25] Minor update --- CONTRIBUTING.md | 2 +- README.md | 64 ++++++++++++++++++++++++------------------------- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 90eb6bac..d3c7f29c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,7 +2,7 @@ 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) diff --git a/README.md b/README.md index 0d313062..514038b3 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ 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/). -## Table of Contents +## Contents - [Protips](#protips) - [Support](#support) @@ -69,7 +69,7 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you > [!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 top](#table-of-contents) +[Back to top](#contents) ### Inherit `box-sizing` @@ -91,7 +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 top](#table-of-contents) +[Back to top](#contents) ### Use `unset` Instead of Resetting All Properties @@ -116,7 +116,7 @@ button { } ``` -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use `:not()` to Apply/Unapply Borders on Navigation @@ -150,7 +150,7 @@ Here, the CSS selector is read as a human would describe it. #### [Demo](https://codepen.io/AllThingsSmitty/pen/LkymvO) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Check if Font Is Installed Locally @@ -171,7 +171,7 @@ code { H/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argyleink/pen/VwYJpgR). -[Back to top](#table-of-contents) +[Back to top](#contents) ### Add `line-height` to `body` @@ -187,7 +187,7 @@ This way textual elements can inherit from `body` easily. #### [Demo](https://codepen.io/AllThingsSmitty/pen/VjbdYd) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Set `:focus` for Form Elements @@ -207,7 +207,7 @@ textarea:focus { #### [Demo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Vertically-Center Anything @@ -241,7 +241,7 @@ body { #### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use `aspect-ratio` Instead of Height/Width @@ -258,7 +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 top](#table-of-contents) +[Back to top](#contents) ### Comma-Separated Lists @@ -275,7 +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 top](#table-of-contents) +[Back to top](#contents) ### Select Items Using Negative `nth-child` @@ -303,7 +303,7 @@ li:not(:nth-child(-n + 3)) { #### [Demo](https://codepen.io/AllThingsSmitty/pen/WxjKZp) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use SVG for Icons @@ -326,7 +326,7 @@ SVG scales well for all resolution types and is supported in all browsers [back } ``` -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use the "Lobotomized Owl" Selector @@ -345,7 +345,7 @@ In this example, all elements in the flow of the document that follow other elem #### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use `max-height` for Pure CSS Sliders @@ -366,7 +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 top](#table-of-contents) +[Back to top](#contents) ### Equal-Width Table Cells @@ -382,7 +382,7 @@ Pain-free table layouts. #### [Demo](https://codepen.io/AllThingsSmitty/pen/jALALm) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Get Rid of Margin Hacks With Flexbox @@ -401,7 +401,7 @@ When working with column gutters you can get rid of `nth-`, `first-`, and `last- Now column gutters always appear evenly-spaced. -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use Attribute Selectors with Empty Links @@ -420,7 +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. -[Back to top](#table-of-contents) +[Back to top](#contents) ### Control Specificity Better with `:is()` @@ -465,7 +465,7 @@ nav h6 { #### [Demo](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Style "Default" Links @@ -480,7 +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. -[Back to top](#table-of-contents) +[Back to top](#contents) ### Intrinsic Ratio Boxes @@ -507,7 +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) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Style Broken Images @@ -545,7 +545,7 @@ img::after { > [!TIP] > Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/). -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use `rem` for Global Sizing; Use `em` for Local Sizing @@ -575,7 +575,7 @@ aside .module { Now each module becomes compartmentalized and easier to style, more maintainable, and flexible. -[Back to top](#table-of-contents) +[Back to top](#contents) ### Hide Autoplay Videos That Aren't Muted @@ -589,7 +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. -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use `:root` for Flexible Type @@ -611,7 +611,7 @@ body { #### [Demo](https://codepen.io/AllThingsSmitty/pen/XKgOkR) -[Back to top](#table-of-contents) +[Back to top](#contents) ### Set `font-size` on Form Elements for a Better Mobile Experience @@ -626,7 +626,7 @@ textarea { } ``` -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use Pointer Events to Control Mouse Events @@ -641,7 +641,7 @@ button:disabled { It's that simple. -[Back to top](#table-of-contents) +[Back to top](#contents) ### Set `display: none` on Line Breaks Used as Spacing @@ -653,7 +653,7 @@ br + br { } ``` -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use `:empty` to Hide Empty HTML Elements @@ -668,13 +668,13 @@ 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., `

`. -[Back to top](#table-of-contents) +[Back to top](#contents) ## Support Current versions of Chrome, Firefox, Safari, and Edge. -[Back to top](#table-of-contents) +[Back to top](#contents) ### Use `margin-inline` instead of `margin` @@ -696,7 +696,7 @@ The same can be done for `margin-block` with defines the block start and end mar #### [Demo](https://codepen.io/AllThingsSmitty/pen/PwoOQGB) -[Back to top](#table-of-contents) +[Back to top](#contents) ## Translations @@ -719,4 +719,4 @@ The same can be done for `margin-block` with defines the block start and end mar - [Русский](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) -[Back to top](#table-of-contents) +[Back to top](#contents) From e4e2f04fcd7f2ed169e1476e91c66948c7c39a4d Mon Sep 17 00:00:00 2001 From: Matt Smith Date: Thu, 20 Mar 2025 10:09:27 -0400 Subject: [PATCH 25/25] Minor edit --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d3c7f29c..7e011f42 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -30,4 +30,4 @@ 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. +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.