代码片段库

经过测试、可直接复制的 Python、Flask、JavaScript、SQL、HTML、CSS 和 Bash 代码片段，都可以在代码游乐场中打开。

只显示此浏览器中收藏的代码片段

4 个代码片段

html

Accessible modal with <dialog>

A native modal with focus handling, Escape to close and a backdrop.

<button id="open">Delete project</button>

<dialog id="confirm" aria-labelledby="confirm-title">
  <form method="dialog">
    <h2 id="confirm-title">Delete this project?</h2>

beginner #accessibility#dialog#ui

html

Contact form with built-in validation

Labels, input types and constraints that browsers validate for free.

<form action="/contact" method="post" novalidate>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <label for="msg">Message</label>

beginner #forms#validation#accessibility

css

Respect reduced motion

Turn animations off for people who asked their system for less motion.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;

beginner #accessibility#animation

css

Visible keyboard focus

Show a clear focus ring for keyboard users without showing it on mouse clicks.

:where(a, button, input, select, textarea):focus { outline: none; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #2f6bff;
  outline-offset: 2px;
  border-radius: 6px;

beginner #accessibility#focus

PandaDev

服务

应用目录

学习

公司