Proszę zauważyć, że nie panel Style (wiem, co w tym kontekście oznacza wyszarzony - nie zastosowano), ale następny panel, panel Właściwości obliczone.
Co to znaczy, że obliczona właściwość jest wyszarzona?
Przykład:
css
google-chrome
google-chrome-devtools
AmbroseChapel
źródło
źródło
Odpowiedzi:
NB: Ta odpowiedź nie ma solidnych dowodów, jest oparta na moich obserwacjach na przestrzeni czasu.
Szare obliczone właściwości nie są ani domyślne, ani dziedziczone. Dzieje się tak tylko w przypadku właściwości, które nie zostały zdefiniowane dla elementu, ale są obliczane na podstawie jego elementów podrzędnych lub nadrzędnych na podstawie renderowania układu w czasie wykonywania.
Weź tę prostą stronę jako przykład,
displayjest domyślna ifont-sizejest dziedziczona:<style> div { font-size: 13px; } </style> <div> <p>asdf</p> </div>W tym konkretnym przykładzie
heightjest obliczany z<p>potomków - węzeł tekstowy (rozmiar czcionki plus wysokość linii),widthjest obliczany na podstawie<div>szerokości jego rodzica - która jest również obliczana na podstawie jego rodzica<body>.EDYCJA: Cóż, pomyślałem ponownie, oto moja odpowiedź oparta na opinii . Powinienem zajrzeć później do kodu źródłowego Chromium: D
Rozwijając te strzałki, można było zobaczyć, która reguła jest stosowana do elementu, spośród wszystkich zdefiniowanych względem niego (bezpośrednio lub dziedziczona przez programistę lub przeglądarkę):
Tutaj możesz prześledzić każdą definicję, nawet uwzględniając wbudowane reguły przeglądarki, i sprawdzić mechanizm kaskadowania (nadpisywania) CSS.
Tak więc dla tych elementów, które nie mają definicji CSS (nie są zdefiniowane bezpośrednio, nie są dziedziczone, nie mają wbudowanej przeglądarki), nie masz żadnego źródła do śledzenia. Wartości właściwości są całkowicie obliczane w czasie wykonywania.
Jeśli zaznaczysz Pokaż wszystko , wyświetlanych jest więcej wyszarzonych właściwości. Te też nie są nigdzie zdefiniowane. Ale w przeciwieństwie do tych na poprzednich zrzutach ekranu, nie są one obliczane w czasie wykonywania - są to domyślne wartości specyfikacji CSS.
źródło
run-time calculatedponieważ szare właściwości to zwykle `` wysokość '' i `` szerokość '', które, jeśli się nad tym zastanowić, są wartościami zależnymi dynamicznie od elementów potomnych elementu (np. Ilość tekstu i rozmiar czcionki tekst zawarty w elemencie lub szerokość elementu nadrzędnego, gdy element ma szerokość: 100%)widthstylu.