In the following example, the red border and ❌ only display once the user has interacted with the field. Try typing something other than an email address to see it in action.
@@ -45,7 +45,7 @@{{EmbedLiveSample("Setting_invalid", 140, 100)}}
+{{EmbedLiveSample("Setting_a_color_and_symbol_on_user-invalid", 140, 100)}}
In the following example, the green border and ✅ only display once the user has interacted with the field. Try changing the email address to another valid email to see it in action.
@@ -54,7 +54,7 @@{{EmbedLiveSample("Setting_valid", 140, 100)}}
+{{EmbedLiveSample("Setting_a_color_and_symbol_on_user-valid", 140, 100)}}
{{EmbedLiveSample("basic_example", "100%", 150)}}
+{{EmbedLiveSample("Basic_example", "100%", 150)}}
Example with fallback for older browsers supporting the -webkit and -ms prefixes. Note that as a selector you will need to write out the whole code block twice, as an unrecognized selector invalidates the whole list.
Note that ::file-selector-button is a whole element, and as such matches the rules from the UA stylesheet. In particular, fonts and colors won't necessarily inherit from the input element.
<form> @@ -127,7 +127,7 @@-{{EmbedLiveSample("arc_of_a_circle")}} +{{EmbedLiveSample("Arc_of_a_circle")}} -CSS
Result
-{{EmbedLiveSample("fallback_example", "100%", 150)}}
+{{EmbedLiveSample("Fallback_example", "100%", 150)}}
Specifications
diff --git a/files/en-us/web/css/background-size/index.html b/files/en-us/web/css/background-size/index.html index 3a6e236f4adc43e..5b0c0b3c2bf783e 100644 --- a/files/en-us/web/css/background-size/index.html +++ b/files/en-us/web/css/background-size/index.html @@ -152,7 +152,7 @@Formal syntax
Examples
-Tiling a large image
+Tiling a large image
Let's consider a large image, a 2982x2808 Firefox logo image. We want to tile four copies of this image into a 300x300-pixel element. To do this, we can use a fixed
@@ -175,7 +175,7 @@background-sizevalue of 150 pixels.CSS
Result
-{{EmbedLiveSample("tiling_a_large_image", 340, 340)}}
+{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}}
See Scaling background images for more examples.
diff --git a/files/en-us/web/css/border-bottom-left-radius/index.html b/files/en-us/web/css/border-bottom-left-radius/index.html index 4244b16519826bf..8b9f6ae8f31cecc 100644 --- a/files/en-us/web/css/border-bottom-left-radius/index.html +++ b/files/en-us/web/css/border-bottom-left-radius/index.html @@ -82,7 +82,7 @@Formal syntax
Examples
-Arc of a circle
+Arc of a circle
A single
@@ -98,9 +98,9 @@<length>value produces an arc of a circle.Arc of a circle
}
Two different <length> values produce an arc of an ellipse.
A square element with a single <percentage> value produces an arc of a circle.
A non-square element with a single <percentage> value produces an arc of an ellipse.
A single <length> value produces an arc of a circle.
Two different <length> values produce an arc of an ellipse.
A square element with a single <percentage> value produces an arc of a circle.
A non-square element with a single <percentage> value produces an arc of an ellipse.
The radius applies to the whole {{cssxref("background")}}, even if the element has no border; the exact position of the clipping is defined by the {{cssxref("background-clip")}} property.
The border-radius property does not apply to table elements when {{cssxref("border-collapse")}} is collapse.
Here is an example of all the property values.
@@ -183,7 +183,7 @@A single <length> value produces an arc of a circle.
Two different <length> values produce an arc of an ellipse.
A square element with a single <percentage> value produces an arc of a circle.
A non-square element with a single <percentage> value produces an arc of an ellipse.
A single <length> value produces an arc of a circle.
Two different <length> values produce an arc of an ellipse.
A square element with a single <percentage> value produces an arc of a circle.
A non-square element with a single <percentage> value produces an arc of an ellipse.
{{ EmbedLiveSample('clear-left','100%','250') }}
+{{ EmbedLiveSample('clear_left','100%','250') }}
-{{ EmbedLiveSample('clear-right','100%','250') }}
+{{ EmbedLiveSample('clear_right','100%','250') }}
-{{ EmbedLiveSample('clear-both','100%','300') }}
+{{ EmbedLiveSample('clear_both','100%','300') }}
currentColor keywordIf currentColor is used as the value of the color property, it instead takes its value from the inherited value of the color property.
<div style="color:blue; border: 1px dashed currentColor;"> The color of this text is blue. @@ -872,7 +872,7 @@-currentColor example
This block is surrounded by a blue border. </div>
{{EmbedLiveSample('currentcolor_example', 600, 80)}}
+{{EmbedLiveSample('currentColor_example', 600, 80)}}
In this example we provide a <div> and a text input. Entering a valid color into the input causes the <div> to adopt that color, allowing you to test our color values.
In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. You can see auto-placement in action in the simplest of ways by creating a grid on a set of items.
-If you give the items no placement information they will position themselves on the grid, one in each grid cell.
@@ -48,14 +48,14 @@{{ EmbedLiveSample('default_placement', '500', '230') }}
+{{ EmbedLiveSample('Default_placement', '500', '230') }}
As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the grid-template-rows property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new implicit rows will be created.
The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.
@@ -97,7 +97,7 @@{{ EmbedLiveSample('Sizing_rows_in_the_implicit_grid', '500', '330') }}
-You can use {{cssxref("minmax()","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.
@@ -143,7 +143,7 @@{{ EmbedLiveSample('Sizing_rows_using_minmax', '500', '330') }}
-You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as 200px. This will continue for as long as content is added to the implicit grid.
You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of column. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.
Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the order property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.
The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.
@@ -296,7 +296,7 @@{{ EmbedLiveSample('Items_with_placement_properties', '500', '500') }}
-You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to span 2. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.
{{ EmbedLiveSample('Deal_with_items_that_span_tracks', '500', '800') }}
-So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.
@@ -436,7 +436,7 @@Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.
-Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of landscape to span two column tracks. I then use grid-auto-flow: dense to create a densely packed grid.
Grid is a powerful specification that, when combined with other parts of CSS such as flexbox, can help you create layouts that were previously impossible to build in CSS. It all starts by creating a grid in your grid container.
-We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.
I can add to our earlier example by adding the grid-template-columns property, then defining the size of the column tracks.
{{ EmbedLiveSample('basic_example', '610', '140') }}
+{{ EmbedLiveSample('Basic_example', '610', '140') }}
-Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new fr unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.
{{ EmbedLiveSample('the_fr_unit', '220', '140') }}
+{{ EmbedLiveSample('The_fr_unit', '220', '140') }}
-In this next example, we create a definition with a 2fr track then two 1fr tracks. The available space is split into four. Two parts are given to the first track and one part each to the next two tracks.
{{ EmbedLiveSample('unequal_fractions', '220', '140') }}
+{{ EmbedLiveSample('Unequal_fractions', '220', '140') }}
-In this final example, we mix absolute sized tracks with fraction units. The first track is 500 pixels, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.
@@ -248,7 +248,7 @@{{ EmbedLiveSample('mixing_fractions_and_absolute_sizes', '220', '140') }}
+{{ EmbedLiveSample('Mixing_fractions_and_absolute_sizes', '220', '140') }}
When creating our example grid we specifically defined our column tracks with the {{cssxref("grid-template-columns")}} property, but the grid also created rows on its own. These rows are part of the implicit grid. Whereas the explicit grid consists of any rows and columns defined with {{cssxref("grid-template-columns")}} or {{cssxref("grid-template-rows")}}.
@@ -329,7 +329,7 @@{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}
-When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, I may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then I would like the row to stretch to that height.
@@ -381,7 +381,7 @@Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.
-We will be exploring line based placement in full detail in a later article. The following example demonstrates doing this in a simple way. When placing an item, we target the line – rather than the track.
@@ -452,7 +452,7 @@
Gutters or alleys between grid cells can be created using the {{cssxref("column-gap")}} and {{cssxref("row-gap")}} properties, or the shorthand {{cssxref("gap")}}. In the below example, I am creating a 10-pixel gap between columns and a 1em gap between rows.
If I set box1 to display: grid I can give it a track definition and it too will become a grid. The items then lay out on this new grid.
{{ EmbedLiveSample('nesting_without_subgrid', '600', '340') }}
+{{ EmbedLiveSample('Nesting_without_subgrid', '600', '340') }}
In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the {{cssxref("gap")}} of the parent and the lines in the nested grid do not align to the lines in the parent grid.
@@ -594,7 +594,7 @@z-indexGrid items can occupy the same cell, and in this case we can use the {{cssxref("z-index")}} property to control the order in which overlapping items stack.
-If we return to our example with items positioned by line number, we can change this to make two items overlap.
@@ -644,11 +644,11 @@{{ EmbedLiveSample('overlapping_without_z-index', '230', '460') }}
+{{ EmbedLiveSample('Overlapping_without_z-index', '230', '460') }}
The item box2 is now overlapping box1, it displays on top as it comes later in the source order.
We can control the order in which items stack up by using the z-index property - just like positioned items. If we give box2 a lower z-index than box1 it will display below box1 in the stack.
The {{cssxref("align-self")}} and {{cssxref("align-items")}} properties control alignment on the block axis. When we use these properties, we are changing the alignment of the item within the grid area you have placed it.
-In the following example, I have four grid areas within my grid. I can use the {{cssxref("align-items")}} property on the grid container, to align the items using one of the following values:
@@ -100,13 +100,13 @@{{ EmbedLiveSample('using_align-items', '500', '500') }}
+{{ EmbedLiveSample('Using_align-items', '500', '500') }}
Keep in mind that once you set align-items: start, the height of each child <div> will be determined by the contents of the <div>. This is in contrast to omitting align-items completely, in which case the height of each <div> stretches to fill its grid area.
The {{cssxref("align-items")}} property sets the {{cssxref("align-self")}} property for all of the child grid items. This means that you can set the property individually, by using align-self on a grid item.
In this next example, I am using the align-self property, to demonstrate the different alignment values. The first area, is showing the default behavior of align-self, which is to stretch. The second item, has an align-self value of start, the third end and the fourth center.
{{ EmbedLiveSample('using_align-self', '500', '500') }}
+{{ EmbedLiveSample('Using_align-self', '500', '500') }}
This behavior has now been clarified in the specification, with browsers yet to implement the correct behavior. Until that happens, you can ensure that items do not stretch, such as images, which are direct children of the grid, by setting {{cssxref("align-self")}} and {{cssxref("justify-self")}} to start. This will mimic the correct behavior once implemented.
-As {{cssxref("align-items")}} and {{cssxref("align-self")}} deal with the alignment of items on the block axis, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} do the same job on the inline axis. The values you can choose from are the same as for align-self.
By combining the align and justify properties we can easily center an item inside a grid area.
@@ -322,7 +322,7 @@The align-content property is applied to the grid container as it works on the entire grid.
The default behavior in grid layout is start, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines:
{{ EmbedLiveSample('default_alignment', '500', '550') }}
+{{ EmbedLiveSample('Default_alignment', '500', '550') }}
-If I add align-content to my container, with a value of end, the tracks all move to the end line of the grid container in the block dimension:
{{ EmbedLiveSample('align-content_end', '500', '550') }}
+{{ EmbedLiveSample('Setting_align-content_end', '500', '550') }}
-We can also use values for this property that you may be familiar with from flexbox; the space distribution values of space-between, space-around and space-evenly. If we update {{cssxref("align-content")}} to space-between, you can see how the elements on our grid space out:
{{ EmbedLiveSample('align-content_end_space-between', '500', '600') }}
+{{ EmbedLiveSample('Setting_align-content_space-between', '500', '600') }}
It is worth noting, that using these space distribution values may cause items on your grid to become larger. If an item spans more than one grid track, as further space is added between the tracks, that item needs to become large to absorb the space. We’re always working in a strict grid. Therefore, if you decide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch.
@@ -502,7 +502,7 @@
-On the inline axis, we can use {{cssxref("justify-content")}} to perform the same type of alignment that we used {{cssxref("align-content")}} for in the block axis.
@@ -563,7 +563,7 @@{{ EmbedLiveSample('Justifying_the_grid_tracks_on_the_inline_axis', '500', '550') }}
-Another way to align items inside their area, is to use auto margins. If you have ever centered your layout in the viewport, by setting the right and left margin of the container block to auto, you know that an auto margin absorbs all of the available space. By setting the margin to auto on both sides, it pushes the block into the middle as both margins attempt to take all of the space.
In Spring of 2017, we saw for the first time a major specification like Grid being shipped into browsers almost simultaneously, and we now have CSS Grid Layout support in the public versions of Firefox, Chrome, Opera, Safari and Edge. However, while evergreen browsers mean that many of us are going to see the majority of users having Grid Layout support very quickly, there are also old or non-supporting browsers to contend with. In this guide we will walk through a variety of strategies for support.
+In Spring of 2017, we saw for the first time a major specification like Grid being shipped into browsers almost simultaneously, and we now have CSS Grid Layout support in the public versions of Firefox, Chrome, Opera, Safari and Edge. However, while evergreen browsers mean that many of us are going to see the majority of users having Grid Layout support very quickly, there are also old or non-supporting browsers to contend with. In this guide we will walk through a variety of strategies for support.
We have typically used floats to create multiple column layouts. If you have floated an item, which is also a grid item in a supporting browser, the float will no longer apply to the item. The fact is that a grid item takes precedence. In the example below, I have a simple media object. In a non-supporting browser, I use {{cssxref("float")}}, however I have also defined the container as a grid container, in order to use the alignment properties that are implemented in CSS Grids.
@@ -101,7 +101,7 @@The above example is very simple, and we can get away without needing to write code that would be a problem to browsers that do not support grid, and legacy code is not an issue to our grid supporting browsers. However, things are not always so simple.
-In this next example, I have a set of floated cards. I have given the cards a {{cssxref("width")}}, in order to {{cssxref("float")}} them. To create gaps between the cards, I use a {{cssxref("margin")}} on the items, and then a negative margin on the container:
@@ -160,7 +160,7 @@{{ EmbedLiveSample('a_more_complex_example', '550', '450') }}
+{{ EmbedLiveSample('A_more_complex_example', '550', '450') }}
The example demonstrates the typical problem that we have with floated layouts: if additional content is added to any one card, the layout breaks.
@@ -174,7 +174,7 @@If I reset the width to auto, then this will stop the float behavior happening for older browsers. I need to be able to define the width for older browsers, and remove the width for grid supporting browsers. Thanks to CSS Feature Queries I can do this, right in my CSS.
Feature queries will look very familiar if you have ever used a media query to create a responsive layout. Rather than checking a {{glossary("viewport")}} width, or some feature of the browser or device, we check for support of a CSS property and value pair using an {{cssxref("@supports")}} rule. Inside the feature query, we can then write any CSS we need to apply our modern layout, and remove anything required for the older layout.
@@ -258,9 +258,9 @@{{ EmbedLiveSample('a_solution_using_feature_queries', '550', '480') }}
+{{ EmbedLiveSample('A_solution_using_feature_queries', '550', '480') }}
-displaydisplayDue to the problems of creating grids of items using floats, many of us would use a different method to the floated method shown above to layout a set of cards. Using display: inline-block is an alternate method.
In these guides, I have already touched on an important feature of grid layout: the support for different writing modes that is built into the specification. For this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so.
+In these guides, I have already touched on an important feature of grid layout: the support for different writing modes that is built into the specification. For this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so.
I’m going to introduce another specification here, that I will be using in my examples: the CSS Writing Modes specification. This spec details how we can use these different writing modes in CSS, not just for the support of languages that have a different writing mode to English, but also for creative purposes. I’ll be using the {{cssxref("writing-mode")}} property to make changes to the writing mode applied to our grid, in order to demonstrate how the logical values work. If you want to dig into writing modes further, however, then I would recommend that you read Jen Simmons excellent article on CSS Writing Modes. This goes into more depth on that specification than we will touch upon here.
-Writing Modes are more than just left to right and right to left text, and the writing-mode property helps us display text running in other directions. The {{cssxref("writing-mode")}} property can have values of:
If we now take a look at a grid layout example, we can see how changing the writing mode means changing our idea of where the Block and Inline Axis are.
-The grid in this example has three columns and two row tracks. This means there are three tracks running down the block axis. In default writing mode, grid auto-places items starting at the top left, moving along to the right, filling up the three cells on the inline axis. It then moves onto the next line, creating a new Row track, and fills in more items:
@@ -128,9 +128,9 @@{{ EmbedLiveSample('default_writing_mode', '500', '330') }}
+{{ EmbedLiveSample('Default_writing_mode', '500', '330') }}
-If we add writing-mode: vertical-lr to the grid container, we can see that the block and inline Axis are now running in a different direction. The block or column axis now runs across the page from left to right, Inline runs down the page, creating rows from top to bottom.
{{ EmbedLiveSample('setting_writing_mode', '500', '330') }}
+{{ EmbedLiveSample('Setting_writing_mode', '500', '330') }}
With the block and inline axis able to change direction, the logical values for the alignment properties start to make more sense.
@@ -242,7 +242,7 @@The key thing to remember when placing items by line number, is that line 1 is the start line, no matter which writing mode you are in. Line -1 is the end line, no matter which writing mode you are in.
-In this next example, I have a grid which is in the default ltr direction. I have positioned three items using line-based placement.
{{ EmbedLiveSample('line-based_placement_with_left_to_right_text', '500', '330') }}
+{{ EmbedLiveSample('Line-based_placement_with_left_to_right_text', '500', '330') }}
-If I now add the {{cssxref("direction")}} property with a value of rtl to the grid container, line 1 becomes the right hand side of the grid, and line -1 on the left.
{{ EmbedLiveSample('line-based_placement_with_right_to_left_text', '500', '330') }}
+{{ EmbedLiveSample('Line-based_placement_with_right_to_left_text', '500', '330') }}
What this demonstrates, is that if you are switching the direction of your text, either for entire pages or for parts of pages, and are using lines: you may want to name your lines, if you do not want the layout to completely switch direction. For some things, for example, where a grid contains text content, this switching may be exactly what you want. For other usage it may not.
@@ -371,7 +371,7 @@This is anti-clockwise! So the reverse of what we do for margins and padding. Once you realize that grid-area sees the world as "block and inline", you can remember that we are setting the two starts, then the two ends. It becomes much more logical once you know!
In addition to displaying documents, using the correct writing mode for the language, writing modes can be used creatively within documents that are otherwise ltr. In this next example I have a grid layout with a set of links down one side. I’ve used writing modes to turn these on their side in the column track:
In the previous guide we looked at grid lines, and how to position items against those lines. When you use CSS Grid Layout you always have lines, and this can be a straightforward way to place items on your grid. However, there is an alternate method to use for positioning items on the grid which you can use alone or in combination with line-based placement. This method involves placing our items using named template areas, and we will find out exactly how this method works. You will see very quickly why we sometimes call this the ascii-art method of grid layout!
-You have already encountered the {{cssxref("grid-area")}} property. This is the property that can take as a value all four of the lines used to position a grid area.
@@ -93,7 +93,7 @@Using this method we do not need to specify anything at all on the individual grid items, everything happens on our grid container. We can see the layout described as the value of the {{cssxref("grid-template-areas")}} property.
-We have completely filled our grid with areas in this example, leaving no white space. However you can leave grid cells empty with this method of layout. To leave a cell empty use the full stop character, '.'. If I want to only display the footer directly under the main content I would need to leave the three cells underneath the sidebar empty.
In order to make the layout neater I can use multiple . characters. As long as there is no white space between the full stops it will be counted as one cell. For a complex layout there is a benefit to having the rows and columns neatly aligned. It means that you can actually see, right there in the CSS, what this layout looks like.
In our example each of the areas spans multiple grid cells and we achieve this by repeating the name of that grid area multiple times with white space between. You can add extra white space in order to keep your columns neatly lined up in the value of grid-template-areas. You can see that I have done this in order that the hd and ft line up with main.
The value of {{cssxref("grid-template-areas")}} must show a complete grid, otherwise it is invalid (and the property is ignored). This means that you must have the same number of cells for each row, if empty with a full stop character demonstrating that the cell is to be left empty. You will also create an invalid grid if your areas are not rectangular.
-As our layout is now contained in one part of the CSS, this makes it very easy to make changes at different breakpoints. You can do this by redefining the grid, the position of items on the grid, or both at once.
@@ -299,7 +299,7 @@grid-template-are
Many of the grid examples you will find online make the assumption that you will use grid for main page layout, however grid can be just as useful for small elements as those larger ones. Using {{cssxref("grid-template-areas")}} can be especially nice as it is easy to see in the code what your element looks like.
-Media object example
+Media object example
As a very simple example we can create a “media object”. This is a component with space for an image or other media on one side and content on the other. The image might be displayed on the right or left of the box.
@@ -343,9 +343,9 @@ Media object example
</div>
</div>
-{{ EmbedLiveSample('media_object_example', '300', '200') }}
+{{ EmbedLiveSample('Media_object_example', '300', '200') }}
-Displaying the image on the other side of the box
+Displaying the image on the other side of the box
We might want to be able to display our box with the image the other way around. To do this, we redefine the grid to put the 1fr track last, and flip the values in {{cssxref("grid-template-areas")}}.
diff --git a/files/en-us/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/en-us/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index dbb05d80c6652a5..12ab0d3cf23b018 100644
--- a/files/en-us/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/en-us/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -10,7 +10,7 @@
In previous guides we’ve looked at placing items by the lines created by defining grid tracks and also how to place items using named template areas. In this guide we are going to look at how these two things work together when we use named lines. Line naming is incredibly useful, but some of the more baffling looking grid syntax comes from this combination of names and track sizes. Once you work through some examples it should become clearer and easier to work with.
-Naming lines when defining a grid
+Naming lines when defining a grid
You can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties. To demonstrate I’ll use the simple layout created in the guide on line-based placement. This time I’ll create the grid using named lines.
@@ -82,7 +82,7 @@ Giving lines multiple names
You may want to give a line more than one name, perhaps it denotes the sidebar-end and the main-start for example. To do this add the names inside the square brackets with whitespace between them [sidebar-end main-start]. You can then refer to that line by either of the names.
-Implicit grid areas from named lines
+Implicit grid areas from named lines
When naming the lines, I mentioned that you can name these anything you like. The name is a custom ident, an author-defined name. When choosing the name you need to avoid words that might appear in the specification and be confusing - such as span. Idents are not quoted.
@@ -126,7 +126,7 @@ Implicit grid areas from named lin
We don’t need to define where our areas are with grid-template-areas as our named lines have created an area for us.
-Implicit Grid lines from named areas
+Implicit Grid lines from named areas
We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to Grid Template Areas, we can use the lines created by our areas to see how this works.
@@ -229,7 +229,7 @@ Multiple lines with the s
If you want to give all of the lines in your grid a unique name then you will need to write out the track definition long-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the tracks. If you do use the repeat syntax you will end up with multiple lines that have the same name, however this can be very useful too.
-12-column grid using repeat()
+Twelve-column grid using repeat()
In this next example I am creating a grid with twelve equal width columns. Before defining the 1fr size of the column track I am also defining a line name of [col-start]. This means that we will end up with a grid that has 12 column lines all named col-start before a 1fr width column.
@@ -276,13 +276,13 @@ 12-column grid using repeat()
<div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
</div>
-{{ EmbedLiveSample('twelve_column_grid_using_repeat', '500', '330') }}
+{{ EmbedLiveSample('Twelve-column_grid_using_repeat', '500', '330') }}
If you take a look at this layout in the Firefox Grid Highlighter you can see how the column lines are shown, and how our items are placed against these lines.
-Defining named lines with a track list
+Defining named lines with a track list
The repeat syntax can also take a track list, it doesn’t just need to be a single track size that is being repeated. The code below would create an eight track grid, with a narrower 1fr width column named col1-start followed by a wider 3fr column named col2-start.
@@ -345,9 +345,9 @@ Defining named lines with a trac
</div>
-
{{ EmbedLiveSample('defining_named_lines_with_a_track_list', '500', '330') }}
+{{ EmbedLiveSample('Defining_named_lines_with_a_track_list', '500', '330') }}
-12-column grid framework
+Twelve-column grid framework
Over the last three guides you have discovered that there are a lot of different ways to place items using grid. This can seem a little bit overcomplicated at first, but remember you don’t need to use all of them. In practice I find that for straightforward layouts, using named template areas works well, it gives that nice visual representation of what your layout looks like, and it is then easy to move things around on the grid.
@@ -411,7 +411,7 @@ 12-column grid framework
}
-{{ EmbedLiveSample('twelve_column_grid_framework', '500', '330') }}
+{{ EmbedLiveSample('Twelve-column_grid_framework', '500', '330') }}
Once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.
diff --git a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
index 2ee819406b44eb1..100e8542107c01d 100644
--- a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
+++ b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -10,7 +10,7 @@
To round off this set of guides to CSS Grid Layout, I am going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout. We will look at an example using grid-template-areas, a typical 12-column flexible grid system, and also a product listing using auto-placement. As you can see from this set of examples, there is often more than one way to achieve the result you want with grid layout. Choose the method you find most helpful for the problems that you are solving and the designs that you need to implement.
-A responsive layout with 1 to 3 fluid columns using grid-template-areas
+A responsive layout with 1 to 3 fluid columns using grid-template-areas
Many websites are a variation of this type of layout, with content, sidebars, a header and a footer. In a responsive design, you may want to display the layout as a single column, adding a sidebar at a certain breakpoint and then bring in a three-column layout for wider screens.
@@ -142,7 +142,7 @@ This is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. In particular I am changing the location of that ad block, as appropriate in my different column setups. I find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. You could always begin to use grid in this way for prototyping, even if you can’t rely on it fully in production due to the browsers that visit your site.
-A flexible 12-column layout
+A flexible 12-column layout
If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, I am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. This means that we will have twelve grid lines named col-start.
@@ -205,7 +205,7 @@ A flexible 12-column layout
There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS Grid Layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this strict column and row placement we can also easily leave white space in our layout. We also don’t need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item.
-Building a layout using the 12-column system
+Building a layout using the 12-column system
To see how this layout method works in practice, we can create the same layout that we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. I am starting with the same markup as used for the grid template areas example.
@@ -326,7 +326,7 @@ Building a layout using th
Something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. We have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. We are also able to take advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. In the final example in this guide we will create a layout that entirely relies on auto-placement.
-A product listing with auto-placement
+A product listing with auto-placement
Many layouts are essentially sets of “cards” – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add media queries to make it so. In this next example I’m combining CSS Grid and Flexbox Layouts to make a simple product listing layout.
@@ -439,7 +439,7 @@ A product listing with auto-place
{{ EmbedLiveSample('A_product_listing_with_auto-placement', '800', '900') }}
-Preventing gaps with the dense keyword
+Preventing gaps with the dense keyword
This is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. It might be nice to cause those to span two tracks, and then they won’t be so tall. I have a class of wide on my larger item, and I add a rule {{cssxref("grid-column-end")}} with a value of span 2. Now when grid encounters this item, it will assign it two tracks. At some breakpoints, this means that we'll get a gap in the grid – where there isn’t space to lay out a two-track item.
@@ -527,7 +527,7 @@ Preventing gaps with the dense k
}
-
{{ EmbedLiveSample('preventing_gaps_with_the_dense_keyword', '800', '900') }}
+{{ EmbedLiveSample('Preventing_gaps_with_the_dense_keyword', '800', '900') }}
This technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.
diff --git a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index c989c7cb28e5144..97a529270f571f0 100644
--- a/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/en-us/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -14,7 +14,7 @@ Grid and flexbox
The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.
-One-dimensional versus two-dimensional layout
+One-dimensional versus two-dimensional layout
A simple example can demonstrate the difference between one- and two-dimensional layouts.
@@ -64,7 +64,7 @@ One-dimensional versus tw
A common question then is how to make those items line up. This is where you want a two-dimensional layout method: You want to control the alignment by row and column, and this is where grid comes in.
-The same layout with CSS grids
+The same layout with CSS grids
In this next example, I create the same layout using Grid. This time we have three 1fr column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.
@@ -117,7 +117,7 @@ Content out or layout in?
If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.
-Box alignment
+Box alignment
The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These were things we have wanted to do for a very long time, and have come up with all kinds of hacks to accomplish, at least visually.
@@ -166,7 +166,7 @@ Box alignment
{{ EmbedLiveSample('Box_alignment', '300', '230') }}
-Alignment in CSS Grids
+Alignment in CSS Grids
This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to start and end rather than flex-start and flex-end. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.
@@ -218,7 +218,7 @@ The fr unit and flex-basi
In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.
-Auto-filling grid tracks
+Auto-filling grid tracks
We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the auto-fill and auto-fit properties.
@@ -256,7 +256,7 @@ Auto-filling grid tracks
{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}
-A flexible number of tracks
+A flexible number of tracks
This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining auto-fit and the {{cssxref("minmax()", "minmax()")}} function. In this next example, I create auto filled tracks with minmax. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be 1fr. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the 1fr maximum as an instruction to share out the remaining space between the items.
@@ -298,7 +298,7 @@ Grid and absolutely positioned
Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.
-A grid container as containing block
+A grid container as containing block
To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.
@@ -363,7 +363,7 @@ A grid container as parent
Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.
-With a grid area as the parent
+With a grid area as the parent
If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside .box3 of the grid.
@@ -434,7 +434,7 @@ Grid and display: contents
If you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example.
-Grid layout with nested child elements
+Grid layout with nested child elements
In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.
@@ -486,9 +486,9 @@ Grid layout with nested child el
-
{{ EmbedLiveSample('grid_layout_with_nested_child_elements', '400', '440') }}
+{{ EmbedLiveSample('Grid_layout_with_nested_child_elements', '400', '440') }}
-Using display_contents
+Using display_contents
If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.
@@ -540,7 +540,7 @@ Using display_contents
}
-{{ EmbedLiveSample('using_display_contents', '400', '350') }}
+{{ EmbedLiveSample('Using_display_contents', '400', '350') }}
This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use display: contents in a similar way with flexbox to enable nested items to become flex items.
diff --git a/files/en-us/web/css/env()/index.html b/files/en-us/web/css/env()/index.html
index 3fb6ef71a6134b0..c75e5a3b9cf3b53 100644
--- a/files/en-us/web/css/env()/index.html
+++ b/files/en-us/web/css/env()/index.html
@@ -69,7 +69,7 @@ Usage
Examples
-Using env() to ensure buttons are not obscured by device UI
+Using env() to ensure buttons are not obscured by device UI
In the following example env() is used to ensure that fixed app toolbar buttons are not obscured by device notifications appearing at the bottom of the screen. On the desktop safe-area-inset-bottom is 0. However, in devices that display notifications at the bottom of the screen, such as iOS, it contains a value that leaves space for the notification to display. This can then be used in the value for {{cssxref("padding-bottom")}} to create a gap that appears natural on that device.
@@ -117,9 +117,9 @@ Using env() to ensure buttons are not obscured by
}
-
{{EmbedLiveSample("Example1", "200px", "500px")}}
+{{EmbedLiveSample("Using_env_to_ensure_buttons_are_not_obscured_by_device_UI", "200px", "500px")}}
-Using the fallback value
+Using the fallback value
The below example makes use of the optional second parameter of env(), which allows you to provide a fallback value in case the environment variable is not available.
@@ -142,7 +142,7 @@ Using the fallback value
env(SAFE-AREA-INSET-LEFT, 50px);
}
-{{EmbedLiveSample("Example2", "350px", "250px")}}
+{{EmbedLiveSample("Using_the_fallback_value", "350px", "250px")}}
Example values
diff --git a/files/en-us/web/css/font/index.html b/files/en-us/web/css/font/index.html
index 9971c05fdca9dcf..43fe8e0de841f2d 100644
--- a/files/en-us/web/css/font/index.html
+++ b/files/en-us/web/css/font/index.html
@@ -132,7 +132,7 @@ Setting font properties
p { font: status-bar }
-Live sample
+Live sample
-{{ EmbedLiveSample('live_sample','100%', '440px')}}
+{{ EmbedLiveSample('Live_sample','100%', '440px')}}
Specifications
diff --git a/files/en-us/web/css/list-style-type/index.html b/files/en-us/web/css/list-style-type/index.html
index b97cf2a999d7931..24de9c86be25a52 100644
--- a/files/en-us/web/css/list-style-type/index.html
+++ b/files/en-us/web/css/list-style-type/index.html
@@ -223,7 +223,7 @@ Formal syntax
Examples
-Setting list item markers
+Setting list item markers
HTML
@@ -258,7 +258,7 @@ Result
{{EmbedLiveSample("Setting_list_item_markers","200","300")}}
-All list style types
+All list style types
HTML
@@ -572,7 +572,7 @@ JavaScript
Result
-{{EmbedLiveSample("all_list_style_types", "600", "800")}}
+{{EmbedLiveSample("All_list_style_types", "600", "800")}}
Specifications
diff --git a/files/en-us/web/css/specificity/index.html b/files/en-us/web/css/specificity/index.html
index b8edf2b7fd4401f..c26d2432390760a 100644
--- a/files/en-us/web/css/specificity/index.html
+++ b/files/en-us/web/css/specificity/index.html
@@ -140,7 +140,7 @@ For more information, visit:
https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css
-The :is() and :not() exceptions
+The :is() and :not() exceptions
The matches-any pseudo-class {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and the negation pseudo-class {{CSSxRef(":not", ":not()")}} are not considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of selector types.
@@ -169,9 +169,7 @@ The :is() and :not() exceptions
{{EmbedLiveSample("The_is_and_not_exceptions")}}
-The :where() exception {{Experimental_Inline}}
-
-{{SeeCompatTable}}
+The :where() exception
The specificity-adjustment pseudo-class {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} always has its specificity replaced with zero.
@@ -215,7 +213,7 @@ The :where() exception {{Experimental_Inline}}
{{EmbedLiveSample("The_where_exception")}}
-Form-based specificity
+Form-based specificity
Specificity is based on the form of a selector. In the following case, the selector *[id="foo"] counts as an attribute selector for the purpose of determining the selector's specificity, even though it selects an ID.
@@ -241,7 +239,7 @@ Form-based specificity
This is because it matches the same element but the ID selector has a higher specificity.
-Tree proximity ignorance
+Tree proximity ignorance
The proximity of an element to other elements that are referenced in a given selector has no impact on specificity. The following style declaration ...
@@ -269,7 +267,7 @@ Tree proximity ignorance
This is because the two declarations have equal selector type counts, but the html h1 selector is declared last.
-Directly targeted elements vs. inherited styles
+Directly targeted elements vs. inherited styles
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule. This CSS ...
diff --git a/files/en-us/web/css/text-overflow/index.html b/files/en-us/web/css/text-overflow/index.html
index 8b52659ee64d3d8..897dee891f2d381 100644
--- a/files/en-us/web/css/text-overflow/index.html
+++ b/files/en-us/web/css/text-overflow/index.html
@@ -69,7 +69,7 @@ Formal syntax
Examples
-One-value syntax
+One-value syntax
This example shows different values for text-overflow applied to a paragraph, for left-to-right and right-to-left text.
@@ -138,9 +138,9 @@ CSS
Result
-{{EmbedLiveSample('one-value_syntax', 600, 320)}}
+{{EmbedLiveSample('One-value_syntax', 600, 320)}}
-Two-value syntax
+Two-value syntax
This example shows the two-value syntax for text-overflow, where you can define different overflow behavior for the start and end of the text.
To show the effect we have to scroll the line so the start of the line is also hidden.
@@ -200,7 +200,7 @@ JavaScript
Result
-{{EmbedLiveSample('two-value_syntax', 600, 360)}}
+{{EmbedLiveSample('Two-value_syntax', 600, 360)}}
Specifications
diff --git a/files/en-us/web/css/transition-delay/index.html b/files/en-us/web/css/transition-delay/index.html
index 6570dbe1b15d8ce..f3d15a5a33550fa 100644
--- a/files/en-us/web/css/transition-delay/index.html
+++ b/files/en-us/web/css/transition-delay/index.html
@@ -55,7 +55,7 @@ Formal syntax
Examples
-Example showing different delays
+Example showing different delays
HTML
@@ -123,7 +123,7 @@ JavaScript
Result
-{{EmbedLiveSample("example_showing_different_delays",275,200)}}
+{{EmbedLiveSample("Example_showing_different_delays",275,200)}}
Specifications
diff --git a/files/en-us/web/css/transition-duration/index.html b/files/en-us/web/css/transition-duration/index.html
index b86f704642d303c..6eebb14a2f1d625 100644
--- a/files/en-us/web/css/transition-duration/index.html
+++ b/files/en-us/web/css/transition-duration/index.html
@@ -49,7 +49,7 @@ Formal syntax
Examples
-Example showing different durations
+Example showing different durations
HTML
@@ -115,7 +115,7 @@ JavaScript
Result
-{{EmbedLiveSample("example_showing_different_durations",275,200)}}
+{{EmbedLiveSample("Example_showing_different_durations",275,200)}}
Specifications
diff --git a/files/en-us/web/css/vertical-align/index.html b/files/en-us/web/css/vertical-align/index.html
index b701a97f0999dc6..db29909f0dbdb9e 100644
--- a/files/en-us/web/css/vertical-align/index.html
+++ b/files/en-us/web/css/vertical-align/index.html
@@ -115,7 +115,7 @@ Formal syntax
Examples
-Basic example
+Basic example
HTML
@@ -136,7 +136,7 @@ Result
{{EmbedLiveSample("Basic_example")}}
-Vertical alignment in a line box
+Vertical alignment in a line box
HTML
@@ -180,9 +180,9 @@ HTML
Result
-{{EmbedLiveSample("vertical_alignment_in_a_line_box", '100%', 160, "", "")}}
+{{EmbedLiveSample("Vertical_alignment_in_a_line_box", '100%', 160, "", "")}}
-Vertical alignment in a table cell
+Vertical alignment in a table cell
HTML
@@ -222,7 +222,7 @@ CSS
Result
-{{EmbedLiveSample("vertical_alignment_in_a_table_cell", '100%', 230, "", "")}}
+{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", '100%', 230, "", "")}}
Specifications