mdn / css-examples Goto Github PK
View Code? Open in Web Editor NEWCode examples that accompany the MDN CSS documentation
Home Page: https://developer.mozilla.org/en-US/docs/Web/CSS
License: Creative Commons Zero v1.0 Universal
Code examples that accompany the MDN CSS documentation
Home Page: https://developer.mozilla.org/en-US/docs/Web/CSS
License: Creative Commons Zero v1.0 Universal
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
the generator itself
generator is missing an option to select border-image-repeat: space;
expected to see all four border-image-repeat
options
https://www.w3.org/TR/css-backgrounds-3/#border-image-repeat
No response
en-us/web/css/css_backgrounds_and_borders/border-image_generator
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)
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'
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:
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)
learn/tasks/writing-modes/logical-width-height-download.html
It differs from code shown in online editor.
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 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?
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!
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
Originally posted by @VsubF in TGX-Android/Telegram-X#297 (review)
Typecho 分页导航 php:
<nav aria-label="分页导航区" class="pagination-nav"> <?php $this->pageNav('«', '»', 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>
This example is missing the body closing tag
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
The generator is not loading properly. Box Shadow Generator App rendered unusable.
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.
I expected to see an app that could better help me understand box shadows in CSS.
Screenshot attached in next section
en-us/web/css/css_backgrounds_and_borders/box-shadow_generator
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.
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
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.
https://github.com/orgs/mdn/discussions/674
No response
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders
Backgrounds and Borders
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.
Full CSS properties
No response
Everything on the MDN is fantastic, I enjoyed learning on MDN platform 💖
en-us/learn/css/building_blocks/backgrounds_and_borders
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;
No media response after changing resolution
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.
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.
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
css-examples/variable-fonts/font-weight.html
Lines 53 to 57 in 3e820ce
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
No response
Behaviour of input fields
Using a tab will add a tab character or 2/4 spaces, but it changes focus on other element on a page
No response
No response
en-us/learn/css/building_blocks/selectors/selectors_tasks
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.
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
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.
https://github.com/orgs/mdn/discussions/674
No response
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.
None
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
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.
https://github.com/orgs/mdn/discussions/674
No response
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…)
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%
.
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.
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
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.
https://github.com/orgs/mdn/discussions/674
No response
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);所以这个不对的。
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?
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.
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).
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
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.
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:
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.
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
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.
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).
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.