Co oznacza .container. \ 31 25 \ 25 w CSS?

Question

W poniższym kodzie, zastanawiam się, co może oznaczać ukośnik odwrotny? W lekcjach, które brałem, nie spotkałem się z ukośnikiem. Uważam, że ten fragment kodu służy do identyfikacji rozmiarów przeglądarki.

.container.\31 25\25 { 
    width: 100%; 
    max-width: 1500px; /* max-width: (containers * 1.25) */ 
    min-width: 1200px; /* min-width: (containers) */ 
} 
.container.\37 5\25 { /* 75% */ 
    width: 900px;  /* width: (containers * 0.75) */ 
} 
.container.\35 0\25 { /* 50% */ 
    width: 600px;  /* width: (containers * 0.50) */ 
} 
.container.\32 5\25 { /* 25% */ 
    width: 300px;  /* width: (containers * 0.25) */ 
} 

Answer 1

Według spec,

Identyfikatory mogą także zawierać znaki i wszelkie uciekli ISO 10646 charakter postaci kodu numerycznego (patrz następny punkt). Na przykład identyfikator "B & W?" może być zapisany jako "B \ & W \?" lub "B \ 26 W \ 3F". [...]

W CSS 2.1, znak ukośnika odwrotnego (\) może wskazać jeden z trzech typów znaków escape. Wewnątrz komentarza CSS, odwrotny ukośnik oznacza samą siebie, a jeśli ukośnik odwrotny jest natychmiast , a następnie koniec arkusza stylów, to również oznacza on sam (tj. Token DELIM).

pierwsze, wewnątrz łańcucha, backsleshem następnie linii jest ignorowane (to ciąg jest traktowane jako nie zawiera ani odwrotny ukośnik lub przełamane). Poza ciągiem znak ukośnika odwrotnego, po którym następuje znak nowej linii, oznacza dla siebie samą (tj. DELIM, a następnie znak nowej linii).

Po drugie, anuluje znaczenie specjalnych znaków CSS. Dowolny znak (z wyjątkiem szesnastkowej cyfry, podawania linii, powrotu karetki lub kanału formularza ) można ująć z odwrotnym ukośnikiem, aby usunąć jego specjalny znacznik . Na przykład, „\””to ciąg składający się z jednego podwójnego cytatu. Preprocesory arkusz Style nie musi usunąć te backslashy z arkusza stylu ponieważ zmieniłoby znaczenie arkusza stylów w.

trzecie, ucieczek odwrotnego ukośnika pozwalają autorom odnoszą się do znaków, których nie można łatwo umieścić w dokumencie.W tym przypadku odwrotny ukośnik to , a następnie co najwyżej sześć cyfr szesnastkowych (0..9AAF), które oznaczają znak ISO 10646 ([ISO10646]) z tą liczbą, która nie może być równa (w CSS 2.1 jest niezdefiniowana, co się stanie, jeśli arkusz stylów zawiera znak z zerowym punktem kodowania Unicode.) Jeśli znak w zakresie [0-9a-fA -F] podąża za szesnastkową liczbą, koniec numer musi zostać wyjaśniony. Istnieją dwa sposoby, aby to zrobić:

1. z przestrzeni (lub inny znak spacje): "\ 26 B" ("& B"). W takim przypadku, programy użytkownika powinny traktować parę "CR/LF" (U + 000D/U + 000A) jako pojedynczą spację.
2. dostarczając dokładnie 6 cyfr w kodzie szesnastkowym "\ 000026B" ("& B")

W rzeczywistości, te dwa sposoby mogą być łączone. Po szesnastkowej ucieczce zostanie zignorowany tylko jeden znak spacji białej . Zauważ, że oznacza to, że "prawdziwa" przestrzeń po sekwencji ucieczki musi zostać podwojona.

Jeśli liczba jest poza zakresem dozwolonym przez Unicode (np., "\ 110000" jest powyżej maksymalnej wartości 10FFFF dozwolonej w bieżącym Unicode), UA może zastąpić ucieczkę "znakiem zastępczym" (U + FFFD). Jeśli ma być wyświetlany znak , UA powinna pokazywać widoczny symbol, taki jak "gif z brakiem znaku" (porównaj 15.2, punkt 5).

Dlatego, następujące są równoważne:

.container.\31 25\25 <--> .container[class ~= "125%"] 
.container.\37 5\25 <--> .container[class ~= "75%"] 
.container.\35 0\25 <--> .container[class ~= "50%"] 
.container.\32 5\25 <--> .container[class ~= "25%"] 

Zauważ, że uciekając jest ważne, w przeciwnym razie nie byłyby ważne identyfikatory (moje podkreślenie):

W CSS identyfikatory (w tym nazwy elementów, klasy i identyfikatory w selectors) mogą zawierać tylko znaki [a-zA-Z0-9] i ISO 10646 znaków U + 0 0A0 i wyżej plus myślnik (-) i podkreślenie (_); one nie mogą zaczynać się od cyfry, dwóch łączników ani łącznika poprzedzonego cyfrą.

Dlatego nieważne są następujące:

.container.125% 
.container.75% 
.container.50% 
.container.25% 

Może to może być z tym wyraźniejszy skrzypce:

.container { 
 
    background: red; 
 
    margin: 10px; 
 
} 
 
.container.\31 25\25 { /* 125% */ 
 
    width: 100%; 
 
    max-width: 1500px; /* (containers * 1.25) */ 
 
    min-width: 1200px; /* (containers * 1.00) */ 
 
} 
 
.container.\37 5\25 { /* 75% */ 
 
    width: 900px;  /* (containers * 0.75) */ 
 
} 
 
.container.\35 0\25 { /* 50% */ 
 
    width: 600px;  /* (containers * 0.50) */ 
 
} 
 
.container.\32 5\25 { /* 25% */ 
 
    width: 300px;  /* (containers * 0.25) */ 
 
}

<div class="container 125%">125%</div> 
 
<div class="container 75%">75%</div> 
 
<div class="container 50%">50%</div> 
 
<div class="container 25%">25%</div>