` element:
+The next-sibling selector (`+`) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the next sibling element of the first selector. For example, to select all `` elements that are immediately preceded by a `
` element: ```css p + img @@ -76,11 +76,13 @@ A common use case is to do something with a paragraph that follows a heading, as If you insert some other element such as a `
` in between the `` and the `
`, you will find that the paragraph is no longer matched by the selector and so does not get the background and foreground color applied when the element is adjacent.
+
+
{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}
-## General sibling combinator
+## Subsequent-sibling combinator
-If you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (`~`). To select all `` elements that come _anywhere_ after `
` elements, we'd do this:
+If you want to select siblings of an element even if they are not directly adjacent, then you can use the subsequent-sibling combinator (`~`). To select all `` elements that come _anywhere_ after `
` elements, we'd do this: ```css p ~ img @@ -88,8 +90,40 @@ p ~ img In the example below we are selecting all `
` elements that come after the `
`, and even though there is a `` in the document as well, the `` that comes after it is selected.
+
+
{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}
+## Creating complex selectors with nesting
+
+The [CSS nesting module](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#combinators) allows you to write nested rules that use combinators to create [complex selectors](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector).
+
+```css
+p {
+ ~ img {
+ }
+}
+/* This is parsed by the browser as */
+p ~ img {
+}
+```
+
+The [`&` nesting selector](/en-US/docs/Web/CSS/Nesting_selector) can also be use to create complex selectors.
+
+```css
+p {
+ & img {
+ }
+}
+/* This is parsed by the browser as */
+p img {
+}
+```
+
+
+
+{{EmbedGHLiveSample("css-examples/learn/selectors/nesting.html", '100%', 800)}}
+
## Using combinators
You can combine any of the selectors that we discovered in previous lessons with combinators in order to pick out part of your document. For example, to select list items with a class of "a" which are direct children of a `
`, try the following:
diff --git a/files/en-us/learn/css/building_blocks/selectors/index.md b/files/en-us/learn/css/building_blocks/selectors/index.md
index 48e5c2c1d4ce48b..bd8df4dad2bca1a 100644
--- a/files/en-us/learn/css/building_blocks/selectors/index.md
+++ b/files/en-us/learn/css/building_blocks/selectors/index.md
@@ -78,7 +78,7 @@ h1,
In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.
-{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1100)}}
+{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1150)}}
When you group selectors in this way, if any selector is syntactically invalid, the whole rule will be ignored.
@@ -108,21 +108,21 @@ There are a few different groupings of selectors, and knowing which type of sele
### Type, class, and ID selectors
-This group includes selectors that target an HTML element such as an ``.
+Type selectors target an HTML element such as an [``](/en-US/docs/Web/HTML/Element/Heading_Elements):
```css
h1 {
}
```
-It also includes selectors which target a class:
+Class selectors target an element that has a specific value for its [`class`](/en-US/docs/Web/HTML/Global_attributes/class) attribute:
```css
.box {
}
```
-or, an ID:
+ID selectors target an element that has a specific value for its [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute:
```css
#unique {
diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md
index 76246af141c5da0..9008f6bbd03ff91 100644
--- a/files/en-us/learn/css/css_layout/grids/index.md
+++ b/files/en-us/learn/css/css_layout/grids/index.md
@@ -752,7 +752,7 @@ body {
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
- grid-template-rows: repeat(1fr);
+ grid-template-rows: repeat(1, 1fr);
gap: 10px;
}
diff --git a/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md b/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md
index 90807df54ceea97..4ff82c6f532759e 100644
--- a/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md
+++ b/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md
@@ -44,7 +44,7 @@ To start with, we'd like you to make a local copy of the starting HTML file —
```html
@@ -160,7 +160,7 @@ Add the following CSS:
}
```
-Finally for this section we'll set some styles on the link states. First, we'll set the `:focus` and `:hover` states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a `class` of `active` is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:
+Finally for this section we'll set some styles on the link states. First, we'll set the `:focus` and `:hover` states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a `class` of `active-tab` is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:
```css
.info-box li a:focus,
@@ -169,7 +169,7 @@ Finally for this section we'll set some styles on the link states. First, we'll
color: white;
}
-.info-box li a.active {
+.info-box li a.active-tab {
background-color: #a60000;
color: white;
}
@@ -227,7 +227,7 @@ function setTabHandler(tab, tabPos) {
tab.className = "";
}
- tab.className = "active";
+ tab.className = "active-tab";
for (const panel of panels) {
panel.className = "";
@@ -245,7 +245,7 @@ This code does the following:
- In the `setTabHandler()` function, the tab has an `onclick` event handler set on it, so that when the tab is clicked, the following occurs:
- A `for` loop is used to cycle through all the tabs and remove any classes that are present on them.
- - A `class` of `active` is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.
+ - A `class` of `active-tab` is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.
- A `for` loop is used to cycle through all the panels and remove any classes that are present on them.
- A class of `active-panel` is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels.
diff --git a/files/en-us/learn/css/first_steps/getting_started/index.md b/files/en-us/learn/css/first_steps/getting_started/index.md
index df7b16f60caee11..92bb09e41ec6fd9 100644
--- a/files/en-us/learn/css/first_steps/getting_started/index.md
+++ b/files/en-us/learn/css/first_steps/getting_started/index.md
@@ -200,7 +200,7 @@ li em {
This selector will select any `` element that is inside (a descendant of) an `- `. So in your example document, you should find that the `` in the third list item is now purple, but the one inside the paragraph is unchanged.
-Something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the HTML. To do so, place a `+` (an **adjacent sibling combinator**) between the selectors.
+Something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the HTML. To do so, place a `+` (an **next-sibling combinator**) between the selectors.
Try adding this rule to your stylesheet as well:
diff --git a/files/en-us/learn/css/howto/create_fancy_boxes/index.md b/files/en-us/learn/css/howto/create_fancy_boxes/index.md
index 0ebbe15bef09fa7..613e9ac0e753aed 100644
--- a/files/en-us/learn/css/howto/create_fancy_boxes/index.md
+++ b/files/en-us/learn/css/howto/create_fancy_boxes/index.md
@@ -10,7 +10,7 @@ CSS boxes are the building blocks of any web page styled with CSS. Making them n
Before we start getting into the practical side of it, make sure you are familiar with [the CSS box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model). It's also a good idea, but not a prerequisite, to be familiar with some [CSS layout basics](/en-US/docs/Learn/CSS/CSS_layout/Introduction).
-On the technical side, Creating fancy boxes are all about mastering CSS border and background properties and how to apply them to a given box. But beyond the technics it's also all about unleashing your creativity. It will not be done in one day, and some web developers spend their whole life having fun with it.
+On the technical side, Creating fancy boxes are all about mastering CSS border and background properties and how to apply them to a given box. But beyond the techniques it's also all about unleashing your creativity. It will not be done in one day, and some web developers spend their whole life having fun with it.
We are about to see many examples, but we will always work on the most simple piece of HTML possible, a simple element:
diff --git a/files/en-us/learn/css/howto/highlight_para_after_h1/index.md b/files/en-us/learn/css/howto/highlight_para_after_h1/index.md
index de94a4dcfe02d40..b498183b29feab3 100644
--- a/files/en-us/learn/css/howto/highlight_para_after_h1/index.md
+++ b/files/en-us/learn/css/howto/highlight_para_after_h1/index.md
@@ -12,9 +12,9 @@ In this guide you can find out how to highlight a paragraph that comes directly
A common pattern is to style the first paragraph in an article differently to the ones that come after it. Usually this first paragraph will come right after a heading, and if this is the case in your design you can use that combination of elements to target the paragraph.
-## The adjacent sibling combinator
+## The next-sibling combinator
-CSS has a group of [CSS Selectors](/en-US/docs/Web/CSS/CSS_selectors) which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the [adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator). This combinator selects an element based on it being next to another element. In our HTML we have a {{htmlelement("Heading_Elements", "h1")}} followed by a {{htmlelement("p")}}. The `
` is an adjacent sibling of the `
` so we can select it with `h1 + p`.
+CSS has a group of [CSS Selectors](/en-US/docs/Web/CSS/CSS_selectors) which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the [next-sibling combinator](/en-US/docs/Web/CSS/Next-sibling_combinator). This combinator selects an element based on it being next to another element. In our HTML we have a {{htmlelement("Heading_Elements", "h1")}} followed by a {{htmlelement("p")}}. The `
` is the next sibling of the `
` so we can select it with `h1 + p`.
{{EmbedGHLiveSample("css-examples/howto/highlight_h1_plus_para.html", '100%', 800)}}
diff --git a/files/en-us/learn/css/styling_text/web_fonts/index.md b/files/en-us/learn/css/styling_text/web_fonts/index.md
index b4cc580c82d2a8f..6542053023af555 100644
--- a/files/en-us/learn/css/styling_text/web_fonts/index.md
+++ b/files/en-us/learn/css/styling_text/web_fonts/index.md
@@ -193,7 +193,7 @@ Let's go through it to see what it does:
- `src`: These lines specify the paths to the font files to be imported into your CSS (the `url` part), and the format of each font file (the `format` part). The latter part in each case is optional, but is useful to declare because it allows browsers to more quickly determine which font they can use. Multiple declarations can be listed, separated by commas. Because the browser will search through them according to the rules of the cascade, it's best to state your preferred formats, like WOFF2, at the beginning.
- {{cssxref("font-weight")}}/{{cssxref("font-style")}}: These lines specify what weight the font has and whether it is italic or not. If you are importing multiple weights of the same font, you can specify what their weight/style is and then use different values of {{cssxref("font-weight")}}/{{cssxref("font-style")}} to choose between them, rather than having to call all the different members of the font family different names. [@font-face tip: define font-weight and font-style to keep your CSS simple](https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) by Roger Johansson shows what to do in more detail.
-> **Note:** You can also specify particular {{cssxref("font-variant")}} and {{cssxref("font-stretch")}} values for your web fonts. In newer browsers, you can also specify a {{cssxref("@font-face/unicode-range", "unicode-range")}} value, which is a specific range of characters you want to use out of the web font — in supporting browsers, only the specified characters will be downloaded, saving unnecessary downloading. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) by Drew McLellan provides some useful ideas on how to make use of this.
+> **Note:** You can also specify particular {{cssxref("font-variant")}} and {{cssxref("font-stretch")}} values for your web fonts. In newer browsers, you can also specify a {{cssxref("@font-face/unicode-range", "unicode-range")}} value, which is a specific range of characters you might want to use out of the web font. In supporting browsers, the font will only be downloaded if the page contains those specified characters, saving unnecessary downloading. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) by Drew McLellan provides some useful ideas on how to make use of this.
## Variable fonts
diff --git a/files/en-us/learn/forms/basic_native_form_controls/buttons.png b/files/en-us/learn/forms/basic_native_form_controls/buttons.png
index 9ae8130b7f40be7..35cdab2a337f429 100644
Binary files a/files/en-us/learn/forms/basic_native_form_controls/buttons.png and b/files/en-us/learn/forms/basic_native_form_controls/buttons.png differ
diff --git a/files/en-us/learn/forms/basic_native_form_controls/checkboxes.png b/files/en-us/learn/forms/basic_native_form_controls/checkboxes.png
index 83882fa80022238..4856d6f466e5cd4 100644
Binary files a/files/en-us/learn/forms/basic_native_form_controls/checkboxes.png and b/files/en-us/learn/forms/basic_native_form_controls/checkboxes.png differ
diff --git a/files/en-us/learn/forms/basic_native_form_controls/disabled.png b/files/en-us/learn/forms/basic_native_form_controls/disabled.png
index 437d3414f8779c5..88dbdcd8f08edce 100644
Binary files a/files/en-us/learn/forms/basic_native_form_controls/disabled.png and b/files/en-us/learn/forms/basic_native_form_controls/disabled.png differ
diff --git a/files/en-us/learn/forms/basic_native_form_controls/filepickers.png b/files/en-us/learn/forms/basic_native_form_controls/filepickers.png
new file mode 100644
index 000000000000000..d0e0287af76261d
Binary files /dev/null and b/files/en-us/learn/forms/basic_native_form_controls/filepickers.png differ
diff --git a/files/en-us/learn/forms/basic_native_form_controls/index.md b/files/en-us/learn/forms/basic_native_form_controls/index.md
index 636029f81351630..173a9baa6c5f4ab 100644
--- a/files/en-us/learn/forms/basic_native_form_controls/index.md
+++ b/files/en-us/learn/forms/basic_native_form_controls/index.md
@@ -66,9 +66,11 @@ Here is a basic single line text field example:
Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data to the server.
-_The following screenshot shows default, focused and disabled text input types in Firefox 71 and Safari on macOS and in Chrome 79 and Edge 18 on Windows 10._
+The screenshot below shows a text input in default, focused, and disabled states. Most browsers indicate the focused state using a focus ring around the control and the disabled state using grey text or a faded/semi-opaque control.
-
+
+
+The screenshots used in this document were taken in the Chrome browser on macOS. There may be minor variations in these fields/buttons across different browsers, but the basic highlighting technique remains similar.
> **Note:** We discuss values for the [`type`](/en-US/docs/Web/HTML/Element/input#type) attribute that enforce specific validation constraints including color, email, and url input types, in the next article, [The HTML5 input types](/en-US/docs/Learn/Forms/HTML5_input_types).
@@ -80,6 +82,10 @@ One of the original input types was the `password` text field type:
```
+The following screenshot shows Password input field in which each input character is shown as a dot.
+
+
+
The `password` value doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be easily read by others.
Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. located at an `https://` address), so the data is encrypted before it is sent.
@@ -143,9 +149,9 @@ Related checkbox items should use the same [`name`](/en-US/docs/Web/HTML/Element
```
-The following screenshots show default, focused and disabled checkboxes in Firefox 71 and Safari 13 on macOS and Chrome 79 and Edge 18 on Windows 10:
+The following screenshot shows checkboxes in the default, focused, and disabled states. Checkboxes in the default and disabled states appear checked, whereas in the focused state, the checkbox is unchecked, with focus ring around it.
-
+
> **Note:** Any checkboxes and radio buttons with the [`checked`](/en-US/docs/Web/HTML/Element/input/checkbox#checked) attribute on load match the {{cssxref(':default')}} pseudo-class, even if they are no longer checked. Any that are currently checked match the {{cssxref(':checked')}} pseudo-class.
@@ -181,9 +187,9 @@ Several radio buttons can be tied together. If they share the same value for the
```
-The following screenshots show unchecked and checked radio buttons, radio buttons that have focus, and disabled unchecked and checked radio buttons — on Firefox 71 and Safari 13 on macOS and Chrome 79 and Edge 18 on Windows 10.
+The following screenshot shows default and disabled radio buttons in the checked state, along with focused a radio button in the unchecked state.
-
+
## Actual buttons
@@ -270,9 +276,9 @@ Below you can find examples of each button `` type, along with the equiva
Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. As you can see from the examples, however, {{HTMLElement("button")}} elements let you use HTML in their content, which is inserted between the opening and closing `
` that comes after it is selected. + + {{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}} +## Creating complex selectors with nesting + +The [CSS nesting module](/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#combinators) allows you to write nested rules that use combinators to create [complex selectors](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#complex_selector). + +```css +p { + ~ img { + } +} +/* This is parsed by the browser as */ +p ~ img { +} +``` + +The [`&` nesting selector](/en-US/docs/Web/CSS/Nesting_selector) can also be use to create complex selectors. + +```css +p { + & img { + } +} +/* This is parsed by the browser as */ +p img { +} +``` + + + +{{EmbedGHLiveSample("css-examples/learn/selectors/nesting.html", '100%', 800)}} + ## Using combinators You can combine any of the selectors that we discovered in previous lessons with combinators in order to pick out part of your document. For example, to select list items with a class of "a" which are direct children of a `
- `, try the following:
diff --git a/files/en-us/learn/css/building_blocks/selectors/index.md b/files/en-us/learn/css/building_blocks/selectors/index.md
index 48e5c2c1d4ce48b..bd8df4dad2bca1a 100644
--- a/files/en-us/learn/css/building_blocks/selectors/index.md
+++ b/files/en-us/learn/css/building_blocks/selectors/index.md
@@ -78,7 +78,7 @@ h1,
In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.
-{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1100)}}
+{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1150)}}
When you group selectors in this way, if any selector is syntactically invalid, the whole rule will be ignored.
@@ -108,21 +108,21 @@ There are a few different groupings of selectors, and knowing which type of sele
### Type, class, and ID selectors
-This group includes selectors that target an HTML element such as an `
- `. So in your example document, you should find that the `` in the third list item is now purple, but the one inside the paragraph is unchanged.
-Something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the HTML. To do so, place a `+` (an **adjacent sibling combinator**) between the selectors.
+Something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the HTML. To do so, place a `+` (an **next-sibling combinator**) between the selectors.
Try adding this rule to your stylesheet as well:
diff --git a/files/en-us/learn/css/howto/create_fancy_boxes/index.md b/files/en-us/learn/css/howto/create_fancy_boxes/index.md
index 0ebbe15bef09fa7..613e9ac0e753aed 100644
--- a/files/en-us/learn/css/howto/create_fancy_boxes/index.md
+++ b/files/en-us/learn/css/howto/create_fancy_boxes/index.md
@@ -10,7 +10,7 @@ CSS boxes are the building blocks of any web page styled with CSS. Making them n
Before we start getting into the practical side of it, make sure you are familiar with [the CSS box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model). It's also a good idea, but not a prerequisite, to be familiar with some [CSS layout basics](/en-US/docs/Learn/CSS/CSS_layout/Introduction).
-On the technical side, Creating fancy boxes are all about mastering CSS border and background properties and how to apply them to a given box. But beyond the technics it's also all about unleashing your creativity. It will not be done in one day, and some web developers spend their whole life having fun with it.
+On the technical side, Creating fancy boxes are all about mastering CSS border and background properties and how to apply them to a given box. But beyond the techniques it's also all about unleashing your creativity. It will not be done in one day, and some web developers spend their whole life having fun with it.
We are about to see many examples, but we will always work on the most simple piece of HTML possible, a simple element:
diff --git a/files/en-us/learn/css/howto/highlight_para_after_h1/index.md b/files/en-us/learn/css/howto/highlight_para_after_h1/index.md
index de94a4dcfe02d40..b498183b29feab3 100644
--- a/files/en-us/learn/css/howto/highlight_para_after_h1/index.md
+++ b/files/en-us/learn/css/howto/highlight_para_after_h1/index.md
@@ -12,9 +12,9 @@ In this guide you can find out how to highlight a paragraph that comes directly
A common pattern is to style the first paragraph in an article differently to the ones that come after it. Usually this first paragraph will come right after a heading, and if this is the case in your design you can use that combination of elements to target the paragraph.
-## The adjacent sibling combinator
+## The next-sibling combinator
-CSS has a group of [CSS Selectors](/en-US/docs/Web/CSS/CSS_selectors) which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the [adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator). This combinator selects an element based on it being next to another element. In our HTML we have a {{htmlelement("Heading_Elements", "h1")}} followed by a {{htmlelement("p")}}. The `
` is an adjacent sibling of the `
` so we can select it with `h1 + p`. +CSS has a group of [CSS Selectors](/en-US/docs/Web/CSS/CSS_selectors) which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the [next-sibling combinator](/en-US/docs/Web/CSS/Next-sibling_combinator). This combinator selects an element based on it being next to another element. In our HTML we have a {{htmlelement("Heading_Elements", "h1")}} followed by a {{htmlelement("p")}}. The `
` is the next sibling of the `
` so we can select it with `h1 + p`. {{EmbedGHLiveSample("css-examples/howto/highlight_h1_plus_para.html", '100%', 800)}} diff --git a/files/en-us/learn/css/styling_text/web_fonts/index.md b/files/en-us/learn/css/styling_text/web_fonts/index.md index b4cc580c82d2a8f..6542053023af555 100644 --- a/files/en-us/learn/css/styling_text/web_fonts/index.md +++ b/files/en-us/learn/css/styling_text/web_fonts/index.md @@ -193,7 +193,7 @@ Let's go through it to see what it does: - `src`: These lines specify the paths to the font files to be imported into your CSS (the `url` part), and the format of each font file (the `format` part). The latter part in each case is optional, but is useful to declare because it allows browsers to more quickly determine which font they can use. Multiple declarations can be listed, separated by commas. Because the browser will search through them according to the rules of the cascade, it's best to state your preferred formats, like WOFF2, at the beginning. - {{cssxref("font-weight")}}/{{cssxref("font-style")}}: These lines specify what weight the font has and whether it is italic or not. If you are importing multiple weights of the same font, you can specify what their weight/style is and then use different values of {{cssxref("font-weight")}}/{{cssxref("font-style")}} to choose between them, rather than having to call all the different members of the font family different names. [@font-face tip: define font-weight and font-style to keep your CSS simple](https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) by Roger Johansson shows what to do in more detail. -> **Note:** You can also specify particular {{cssxref("font-variant")}} and {{cssxref("font-stretch")}} values for your web fonts. In newer browsers, you can also specify a {{cssxref("@font-face/unicode-range", "unicode-range")}} value, which is a specific range of characters you want to use out of the web font — in supporting browsers, only the specified characters will be downloaded, saving unnecessary downloading. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) by Drew McLellan provides some useful ideas on how to make use of this. +> **Note:** You can also specify particular {{cssxref("font-variant")}} and {{cssxref("font-stretch")}} values for your web fonts. In newer browsers, you can also specify a {{cssxref("@font-face/unicode-range", "unicode-range")}} value, which is a specific range of characters you might want to use out of the web font. In supporting browsers, the font will only be downloaded if the page contains those specified characters, saving unnecessary downloading. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) by Drew McLellan provides some useful ideas on how to make use of this. ## Variable fonts diff --git a/files/en-us/learn/forms/basic_native_form_controls/buttons.png b/files/en-us/learn/forms/basic_native_form_controls/buttons.png index 9ae8130b7f40be7..35cdab2a337f429 100644 Binary files a/files/en-us/learn/forms/basic_native_form_controls/buttons.png and b/files/en-us/learn/forms/basic_native_form_controls/buttons.png differ diff --git a/files/en-us/learn/forms/basic_native_form_controls/checkboxes.png b/files/en-us/learn/forms/basic_native_form_controls/checkboxes.png index 83882fa80022238..4856d6f466e5cd4 100644 Binary files a/files/en-us/learn/forms/basic_native_form_controls/checkboxes.png and b/files/en-us/learn/forms/basic_native_form_controls/checkboxes.png differ diff --git a/files/en-us/learn/forms/basic_native_form_controls/disabled.png b/files/en-us/learn/forms/basic_native_form_controls/disabled.png index 437d3414f8779c5..88dbdcd8f08edce 100644 Binary files a/files/en-us/learn/forms/basic_native_form_controls/disabled.png and b/files/en-us/learn/forms/basic_native_form_controls/disabled.png differ diff --git a/files/en-us/learn/forms/basic_native_form_controls/filepickers.png b/files/en-us/learn/forms/basic_native_form_controls/filepickers.png new file mode 100644 index 000000000000000..d0e0287af76261d Binary files /dev/null and b/files/en-us/learn/forms/basic_native_form_controls/filepickers.png differ diff --git a/files/en-us/learn/forms/basic_native_form_controls/index.md b/files/en-us/learn/forms/basic_native_form_controls/index.md index 636029f81351630..173a9baa6c5f4ab 100644 --- a/files/en-us/learn/forms/basic_native_form_controls/index.md +++ b/files/en-us/learn/forms/basic_native_form_controls/index.md @@ -66,9 +66,11 @@ Here is a basic single line text field example: Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data to the server. -_The following screenshot shows default, focused and disabled text input types in Firefox 71 and Safari on macOS and in Chrome 79 and Edge 18 on Windows 10._ +The screenshot below shows a text input in default, focused, and disabled states. Most browsers indicate the focused state using a focus ring around the control and the disabled state using grey text or a faded/semi-opaque control. - + + +The screenshots used in this document were taken in the Chrome browser on macOS. There may be minor variations in these fields/buttons across different browsers, but the basic highlighting technique remains similar. > **Note:** We discuss values for the [`type`](/en-US/docs/Web/HTML/Element/input#type) attribute that enforce specific validation constraints including color, email, and url input types, in the next article, [The HTML5 input types](/en-US/docs/Learn/Forms/HTML5_input_types). @@ -80,6 +82,10 @@ One of the original input types was the `password` text field type: ``` +The following screenshot shows Password input field in which each input character is shown as a dot. + + + The `password` value doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be easily read by others. Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. located at an `https://` address), so the data is encrypted before it is sent. @@ -143,9 +149,9 @@ Related checkbox items should use the same [`name`](/en-US/docs/Web/HTML/Element ``` -The following screenshots show default, focused and disabled checkboxes in Firefox 71 and Safari 13 on macOS and Chrome 79 and Edge 18 on Windows 10: +The following screenshot shows checkboxes in the default, focused, and disabled states. Checkboxes in the default and disabled states appear checked, whereas in the focused state, the checkbox is unchecked, with focus ring around it. - + > **Note:** Any checkboxes and radio buttons with the [`checked`](/en-US/docs/Web/HTML/Element/input/checkbox#checked) attribute on load match the {{cssxref(':default')}} pseudo-class, even if they are no longer checked. Any that are currently checked match the {{cssxref(':checked')}} pseudo-class. @@ -181,9 +187,9 @@ Several radio buttons can be tied together. If they share the same value for the ``` -The following screenshots show unchecked and checked radio buttons, radio buttons that have focus, and disabled unchecked and checked radio buttons — on Firefox 71 and Safari 13 on macOS and Chrome 79 and Edge 18 on Windows 10. +The following screenshot shows default and disabled radio buttons in the checked state, along with focused a radio button in the unchecked state. - + ## Actual buttons @@ -270,9 +276,9 @@ Below you can find examples of each button `` type, along with the equiva Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. As you can see from the examples, however, {{HTMLElement("button")}} elements let you use HTML in their content, which is inserted between the opening and closing `