mdn/css-examples

Code examples that accompany the MDN CSS documentation

css-examples

Code examples that accompany various MDN CSS documentation pages.

Note

You can include an example directly in MDN pages using {{EmbedLiveSample()}} macros or regular Markdown code blocks. These methods are simpler to maintain as the code lives beside the rest of the content. Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.

The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the steps() timing function available for CSS animations and transitions, and the new frames() timing function. Run the example live. You can also find versions that show the same timing function used with transitions, and used with the Web Animations API.

The "counter-style-demo" directory contains a demo for the @counter-style documentation. See the live demo here.

The "moz-context-properties" directory contains a demo for the -moz-context-properties documentation. See the live demo here.

The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples.

The "object-fit-basics" directory contains a simple page demonstrating typical usage of different object-fit and object-position values. Run example live.

The "object-fit-gallery" directory contains a fun image gallery that uses object-fit to display the images more nicely, both in thumbnail and full size view. Run the example live.

The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different overscroll-behavior values. Run example live.

The "tools" directory contains various tools for working with CSS, including a color picker and a box shadow generator.

Contribute to MDN Web Docs

You can contribute to MDN Web Docs and be a part of our community through content contributions, engineering, or translation work. The MDN Web Docs project welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community.

To find out how to get started, see the CONTRIBUTING.md document in this repository. By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our Code of Conduct.

Get in touch

You can communicate with the MDN Web Docs team and community using the communication channels.

css-examples's Issues

Can developers edit these examples?

I would like to edit one of the pages in this repository to improve it. I can edit MDN via the editor interface but for the embedded examples, it seems that I have to edit them in this repository instead.

Does MDN accept pull requests from developers? There is no information about that in this repository.

Incomplete recipe for css-cookbook/media-objects--download

In https://github.com/mdn/css-examples/blob/main/css-cookbook/media-objects--download.html, I think the following line must be added in the .media-flip rule:

display: grid;

The same line is already part of the .media rule.

Without that modification, the recipe does not work correctly.

Color picker: hexa value does not take account of alpha channel

Hi,
Here https://mdn.github.io/css-examples/tools/color-picker/

Thanks for this nice tool.

[Border-image generator] Longer image paths cause "CSS Code" box overflow

Longer image paths cause box overflow on fixed height "CSS Code" container. Still copy-able just visually a bit off:

The fixed heights look like an artifact of the float based layout used when border-image was new. Updating to grid/flex would be one way fix this.

No output is showing on Web animations API

As you provided the link to learn about the Web animations API frames example

The file I was trying to issue on mdn/css-examples/animation-frames-timing-function/index-waa.html

I was trying to explore animations and encountered this file, which was not showing the output as expected.

It was just showing the blank screen below

As I tried to figure out what the issue is about, I figured out some exceptions in the console window of the browser says

Uncaught TypeError: Failed to execute 'animate' on 'Element': 'frames(10)' is not a valid value for easing at 
index-waa.html:50:17

Attaching the console error below

Do you ignore setting meta viewport in media-queries step

No media response after changing resolution

Updates to border radius generator tool

What was incorrect, unhelpful, or incomplete?

This stems from the discussion I started concerning the tools on MDN Web Docs. Please read the discussion for more details and context.

There are a couple of common problems between these tools and issues filed here. This issue will track the work on addressing the relevant issues and do a bit of a rewrite of the border radius generator.

Known issues

None

Common issues

• Ensure that the tool is responsive and usable on as many platforms and devices as possible.
• Rewrite the JS to use modern syntax without introducing the need for polyfills

The work will be split up into two to three separate pull requests. The first will address the responsiveness, the second the JS, and the last any existing issues that were not already fixed by the JS updates.

Reviewers for the work will be between @caugner and @LeoMcA

What did you expect to see?

The tool is responsive and usable across viewports and devices. The code has been updated and is in a better state to ensure they can be more easily maintained going forward.

Do you have any supporting links, references, or citations?

https://github.com/orgs/mdn/discussions/674

Do you have anything more you want to share?

No response

Inconsistent downloadable starting code for task

Downloadable starting code

learn/tasks/writing-modes/logical-width-height-download.html
It differs from code shown in online editor.

Online editor code

learn/tasks/writing-modes/logical-width-height.html
Should the writing-mode for the vertical class be declared inside of the editable styles area? It can be declared after the box class styles. This makes the task easier to solve too.

The interactive examples didn't have width and height CSS properties, which make them invisible in other editor environment.

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

What specific section or headline is this issue about?

Backgrounds and Borders

What information was incorrect, unhelpful, or incomplete?

CSS properties of image elements should be placed in the interactive code. I tried to copy the code on sublime but didn't see the image, until I figured out that it needs width and height to be displayed.

What did you expect to see?

Full CSS properties

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Everything on the MDN is fantastic, I enjoyed learning on MDN platform 💖

MDN metadata

Page report details

• Folder: en-us/learn/css/building_blocks/backgrounds_and_borders
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
• Last commit: mdn/content@acfe8c9
• Document last modified: 2023-07-07T07:19:19.000Z

Updates to border image generator tool

What was incorrect, unhelpful, or incomplete?

This stems from the discussion I started concerning the tools on MDN Web Docs. Please read the discussion for more details and context.

There are a couple of common problems between these tools and issues filed here. This issue will track the work on addressing the relevant issues and do a bit of a rewrite of the border image generator.

Known issues

• #96
• #93
• #63
• #60

Common issues

• Ensure that the tool is responsive and usable on as many platforms and devices as possible.
• Rewrite the JS to use modern syntax without introducing the need for polyfills

The work will be split up into two to three separate pull requests. The first will address the responsiveness, the second the JS, and the last any existing issues that were not already fixed by the JS updates.

Reviewers for the work will be between @caugner and @LeoMcA

What did you expect to see?

The tool is responsive and usable across viewports and devices. The code has been updated and is in a better state to ensure they can be more easily maintained going forward.

Do you have any supporting links, references, or citations?

https://github.com/orgs/mdn/discussions/674

Do you have anything more you want to share?

No response

Modern JS: replaces occurrences of `rgba` and `hsla`

There are quite a few occurrences of rgba and hsla in the repo.

We should only use the modern syntax of rgb and hsl. (No need to update the tools directory, they would need much more work if we want to keep them…)

css-examples/counter-style-demo typos

I submitted three pull requests (sorry) for the html, css, and js files for the counter style demo.
#117 #118 #119
Wasn't able to figure out how to merge the changes into one request, I apologize for that.

The three file changes fix a typo that was preventing the devanagari (spelled devanagiri in the files) from working.

The css-examples file change process seems a little different from the main content submissions in terms of automatically assigning a reviewer, so i'm making this post to raise visibility.

I'm sure there is a better way to go about this, so please, if you have the time, point me in the direction of where I can go to improve my usage of all of this. Thank you so much!

Fix width of embedded live sample preview and form controls

Hey @mdn/mdn-community-engagement! For the current embed live sample the width is set to 90% with a max-width of 700px. This might have worked with the previous MDN Web Docs layout, but is causing problems with some of the examples leading to confusion.

For example, even with the correct code, the following example on .. displays incorrectly:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills#multicol_two

If we update styles.css, set the width to 100% and remove the max-width, the output is as expected.

With the above change, we would also need to set the form elements to 100%.

font name without ' '

Hello! I found font name with space but without ' '.
https://github.com/mdn/css-examples/blob/master/learn/tasks/cascade/cascade-download.html

'Helvetica Neue'

“Box-shadow generator” tool not loading properly, making the tools unusable

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator

What specific section or headline is this issue about?

The generator is not loading properly. Box Shadow Generator App rendered unusable.

What information was incorrect, unhelpful, or incomplete?

The color selector covers 50% of the setting options and the CSS code detail - so the generator app is not usable.

I thought it might be browser specific. I originally loaded the page in Firefox. I next tried loading the page in Safari and the same thing happened.

What did you expect to see?

I expected to see an app that could better help me understand box shadows in CSS.

Do you have any supporting links, references, or citations?

Screenshot attached in next section

Do you have anything more you want to share?

MDN metadata

Page report details

• Folder: en-us/web/css/css_backgrounds_and_borders/box-shadow_generator
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md
• Last commit: mdn/content@71c4bc0
• Document last modified: 2022-09-28T03:40:57.000Z

Updates to colour picker tool

What was incorrect, unhelpful, or incomplete?

This stems from the discussion I started concerning the tools on MDN Web Docs. Please read the discussion for more details and context.

There are a couple of common problems between these tools and issues filed here. This issue will track the work on addressing the relevant issues and do a bit of a rewrite of the color picker tool.

Known issues

• #100

Common issues

• Ensure that the tool is responsive and usable on as many platforms and devices as possible.
• Rewrite the JS to use modern syntax without introducing the need for polyfills

The work will be split up into two to three separate pull requests. The first will address the responsiveness, the second the JS, and the last any existing issues that were not already fixed by the JS updates.

Reviewers for the work will be between @caugner and @LeoMcA

What did you expect to see?

The tool is responsive and usable across viewports and devices. The code has been updated and is in a better state to ensure they can be more easily maintained going forward.

Do you have any supporting links, references, or citations?

https://github.com/orgs/mdn/discussions/674

Do you have anything more you want to share?

No response

The css class is missed,when i use PJAX,How to reload it?

Typecho 分页导航 php:
<nav aria-label="分页导航区" class="pagination-nav"> <?php $this->pageNav('&laquo;', '&raquo;', 1, '...', array('wrapTag' => 'ul', 'wrapClass' => 'pagination justify-content-center ' . $color['name'], 'itemTag' => 'li', 'textTag' => 'a', 'currentClass' => 'active', 'prevClass' => 'prev', 'nextClass' => 'next')); ?> </nav>

PJAX OFF:
<nav aria-label="分页导航区" class="pagination-nav"> <ul class="pagination justify-content-center dark"><li class="active page-item"><a href="https://ntnas.top:82/typecho/page/1/" class="page-link">1</a></li><li class="page-item"><a href="https://ntnas.top:82/typecho/page/2/" class="page-link">2</a></li><li class="page-item"><a class="page-link">...</a></li><li class="page-item"><a href="https://ntnas.top:82/typecho/page/5/" class="page-link">5</a></li><li class="next page-item"><a href="https://ntnas.top:82/typecho/page/2/" class="page-link" aria-label="下一页">»</a></li></ul> </nav>

PJAX ON:
<nav aria-label="分页导航区" class="pagination-nav"> <ul class="pagination justify-content-center dark"><li class="prev"><a href="https://ntnas.top:82/typecho/page/1/">«</a></li><li><a href="https://ntnas.top:82/typecho/page/1/">1</a></li><li class="active"><a href="https://ntnas.top:82/typecho/page/2/">2</a></li><li><a href="https://ntnas.top:82/typecho/page/3/">3</a></li><li><a>...</a></li><li><a href="https://ntnas.top:82/typecho/page/5/">5</a></li><li class="next"><a href="https://ntnas.top:82/typecho/page/3/">»</a></li></ul> </nav>

Side Effect of playable.js

This applies to all the files named playable.js for example, css-examples/learn/playable.js. What I have noticed is that while editing the CSS, if I add the rule:

* {
  display: none;
}

The whole html page for example this goes blank which is referenced in an iframe here. Which means I can no longer edit the css or even reset it. The only temporary fix for this is to reload the whole page (and thus resetting the css).

Maybe a solution for this would be to always overwrite the display property? (But then that wouldn't allow users to set display: block; or display: none;)

Another problem is that playable.js allows users to change the innerHTML property. Which possibly makes this vulnerable to an HTML injection attack?

Modern JS: don't use `var` in css-examples

Quite a few examples in this repo extensively use var.

This is a bad practice; we have eliminated them from mdn/content (and other repos). We should do the same here: most will be simply replaced by const and let, although there may be a few more complex cases (where var is used inside a scope for a variable at a higher scope)

[Mobile] Section border overlaps the examples

1. On a mobile browser open https://developer.allizom.org/en-us/docs/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container#Aligning_one_item_with_align-self.
2. Scroll through the flex examples.
3. Notice that the section border line overlaps the example itself instead of encapsulating it.

[Border-image generator] `border-image-slice` `fill` keyword not toggled in CSS output

Although the border-image-slice fill keyword is correctly toggled for the actual inline styles applied to the example element,
the CSS output (that can be viewed and copied by the user) is not. border-image-slice always contains the fill keyword,
regardless of the toggle state of the fill option.

background-color: rgba(0,0,0,.5);该属性值最后一个参数，无法设置文字透明！

https://github.com/mdn/css-examples/blob/master/learn/solutions.md#backgrounds-and-borders该文档中要求，使用rgba颜色为半透明的标题添加了背景颜色， background-color: rgba(0,0,0,.5);这个属性值中最后一个参数无法让文字透明（无法让标题透明）。如果让文字在背景中透明，正确的方法应该使用opacity: 0.5;这个属性！

最初学习文档是https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders玩转背景和边框中，第3个要求：给h2标题一个半透明的黑色背景颜色，并使文本为白色。但是解决方案中用了background-color: rgba(0,0,0,.5);所以这个不对的。

[Border-image generator] include gradient as border-image-source example

All current examples on the border image generator ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator ) include linked images but it's possible to use gradients as border-image-source It would be nice to have an example of this.

The current blue striped border image (https://mdn.github.io/css-examples/tools/border-image-generator/border-image-5.png) seems like a perfect candidate to replace with a repeating-linear-gradient

border-image: repeating-linear-gradient(to bottom right, #97bde1 0 1px, transparent 2px 6.3px, #97bde1 7px 9.2px) 0 12 / 0px 12px repeat;

possible Border-image generator UI updates

The recent MDN redesign has reduced the width available for the Border-image Generator. As an example there is now only room for 2 boxes dedicated to each individual property per grid line instead of the old design that had room to show 3. This makes the page a bit longer and therefore slightly harder to use. Have had some thoughts about changes to help with this:

1. the image selection options at the top (including the UI to upload your own image) seem like they should be in a box similar to all the others titled "border-image-source". Would take up less room and have a more consistent UI. This might need to be 2 grid spots.

2. I'm not entirely sure I understand the point of the area labeled "control box". It's marking a fixed height for the area below it but I don't think it's really necessary. Will explain more in up coming points

3. the visual border-image-slice UI is very nice but it seems like it should just go in the "border-image-slice" titled box with the other border-image-slice controls. This might also then need to be 2 grid spots.

4. All that would leave in the "control box" area is the current drag-able preview element (which by the way is always drag-able even if the drag-able toggle is off) with the live border-image. Maybe we just add the border-image code to each of the individual "border-image-" property boxes so that a preview of the resulting border-image is always on screen? A side benefit of this is seeing the border-image on 2 different sized elements (one gird space wide and 2 grid spaces wide).

5. Dev tools is calling out the heading text color contrast on the individual "border-image-x" properties for not meeting the AA standard. So that should get fixed as well.

Any other thoughts on the UI?

`MDN Border-image generator`: Move `border-image-source` to the end in `CSS Code` output

Currently, properties are listed after the border-image-source property, like border-style.
As border-image-source contains the encoded image, it can become quite lengthy, and often the image is referenced differently (e.g. by URL or by some asset management in the build step). Hence the developer may copy everything until border-image-source and then just skip everything else, as there can be a lot to scroll down - and thereby easily miss other important properties, as border-style (which is required by Chrome to make the border image actually visible).

Example is not working as expected

In this page Auto-placement-in-CSS-Grid-Layout

By removing the property grid-auto-flow, the content doesn't reflow to leave gaps as stated by the author.

More details in this other issue #HERE

EMBED GH LIVE SAMPLE

CSS-EXAMPLE FILE
Auto-placement-in-css-grid-layout

Superfluous `label` styling

The example variable-fonts/font-weight.html does not employ the label tag, yet styles it:

css-examples/variable-fonts/font-weight.html

Lines 25 to 29 in 3e820ce

	label {
	font: 1rem monospace;
	white-space: nowrap;
	}

css-examples/variable-fonts/font-weight.html

Lines 53 to 57 in 3e820ce

	label {
	font: 1rem monospace;
	white-space: nowrap;
	}

Updates to box-shadow generator tool

What was incorrect, unhelpful, or incomplete?

This stems from the discussion I started concerning the tools on MDN Web Docs. Please read the discussion for more details and context.

There are a couple of common problems between these tools and issues filed here. This issue will track the work on addressing the relevant issues and do a bit of a rewrite of the box-shadow generator.

Known issues

• #157

Common issues

• Ensure that the tool is responsive and usable on as many platforms and devices as possible.
• Rewrite the JS to use modern syntax without introducing the need for polyfills

The work will be split up into two to three separate pull requests. The first will address the responsiveness, the second the JS, and the last any existing issues that were not already fixed by the JS updates.

Reviewers for the work will be between @caugner and @LeoMcA

What did you expect to see?

The tool is responsive and usable across viewports and devices. The code has been updated and is in a better state to ensure they can be more easily maintained going forward.

Do you have any supporting links, references, or citations?

https://github.com/orgs/mdn/discussions/674

Do you have anything more you want to share?

No response

Variable fonts guide (`ital` axis): use a more straightforward font?

The particular font choice in the Variable fonts guide: italic axis seems to complicate what is already not straightforward about the ital axis in CSS, as Jost-VF uses three states: 0, 1, and 2.

I would suggest replacing it with a font that just uses the 0 and 1 state, but I don't know what a good font for that might be. Maybe @jpamental has some ideas here?

tip

This example is missing the body closing tag

Instructions to run locally

It would be nice if instructions to run it locally are provided in order to test changes and be able to contribute with solutions to the proposed exercises.

CODE_OF_CONDUCT.md file missing

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please see Mozilla-GitHub-Standards or email [email protected].

(Message COC001)


Originally posted by @VsubF in TGX-Android/Telegram-X#297 (review)

border-image generator is missing an option to select `border-image-repeat: space;`

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator

What specific section or headline is this issue about?

the generator itself

What information was incorrect, unhelpful, or incomplete?

generator is missing an option to select border-image-repeat: space;

What did you expect to see?

expected to see all four border-image-repeat options

Do you have any supporting links, references, or citations?

https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/css_backgrounds_and_borders/border-image_generator
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/css_backgrounds_and_borders/border-image_generator/index.md
• Last commit: mdn/content@9a9a9f2
• Document last modified: 2021-08-20T06:28:15.000Z

Tab doesn't work in text field in interactive examples

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

Behaviour of input fields

What did you expect to see?

Using a tab will add a tab character or 2/4 spaces, but it changes focus on other element on a page

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn/css/building_blocks/selectors/selectors_tasks
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
• Last commit: mdn/content@c64e813
• Document last modified: 2023-10-23T08:57:58.000Z