arabic-web-development/examples/css-modern-v1.9.html at master · GalaxyRuler/arabic-web-development · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html dir="rtl" lang="ar">
  <head>
    <title>واجهة CSS حديثة</title>
    <style>
      @property --لون-علامة {
        syntax: "<color>";
        inherits: false;
        initial-value: light-dark(black, white);
      }

      @layer base, مكونات;

      @layer base {
        body {
          margin: 0;
          font: 16px/1.6 system-ui;
          color-scheme: light dark;
          background-color: light-dark(white, black);
        }

        ::selection {
          background: color-mix(in oklch, red, blue);
          color: white;
        }
      }

      @supports selector(:has(*)) {
        @layer مكونات {
          section.بطاقة:has(> input:invalid) {
            outline: 2px solid red;
            outline-offset: 3px;
          }

          section.بطاقة :is(button:hover, button:focus-visible, input:focus-within) {
            appearance: none;
            field-sizing: content;
            resize: vertical;
            user-select: text;
            pointer-events: auto;
            touch-action: pan-x pinch-zoom;
            scrollbar-color: currentColor transparent;
            scrollbar-width: thin;
            transition-behavior: allow-discrete;
            view-transition-name: بطاقة;
          }

          input::placeholder {
            color: gray;
          }

          input::file-selector-button {
            appearance: none;
          }
        }
      }

      @scope (section.بطاقة) to (section.نهاية) {
        button:focus-visible {
          anchor-name: --مرساة-زر;
          position-anchor: --مرساة-زر;
          position-area: top right;
          position-visibility: avoid;
        }
      }

      @starting-style {
        section.بطاقة {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <section class="بطاقة">
        <h1>نموذج حديث</h1>
        <p>مثال يختبر طبقات CSS والمحددات الحديثة وخصائص واجهات النماذج.</p>
        <input type="email" required placeholder="البريد الإلكتروني">
        <button type="button">إرسال</button>
        <section class="نهاية"></section>
      </section>
    </main>
  </body>
</html>