Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyjątki dla CSS
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
markonix
Ciężko mi nazwać "problem". Chodzi mi o prostą sprawę.

Jak zrobić wyjątek dla globalnych deklaracji.
Konkretny przykład: strona ma zadeklarowany styl dla tabel (tr, th, td).
Na tabeli opiera się datepicker (jquery UI).
Oczywiście ma bardzo fajne style, jednak po wrzuceniu na stronę wygląd jest zmieniany przez globalny wygląd tabel.
Odchylenia wynikają z braku deklaracji określonych cech w CSSie JQUERY UI np. wysokość, tło itp.

Jedyne co mi przychodzi na myśl to zastosowanie NOT ale to nie działa wszędzie, albo po prostu FireBug w dłoń i ręczne resetowanie tych kilku atrybutów.
Tylko zastanawiam się nad bardziej uniwersalną metodą - piszę dodatek, który będzie przenoszony na różne strony i ktoś może zadeklarować sobie inne atrybuty, bardziej wymyślne i wygląd kalendarza odbiegnie od zamierzonego.

Przydało by się w CCS coś w stylu.
Kod
tr.kalasa {
prevent.default();
}

smile.gif
northman
a !important; sobie nie poradzi?
kwantOne
Musisz tutaj zastosować kaskadowość stylów CSS i style dla datepickera umieścić poniżej stylów globalnych lub jeżeli linkujesz kilka plików ze stylami CSS to plik z stylami dla datepickera zalinkować poniżej pliku dla styli globalnych:

  1. <link rel="stylesheet" href="style_globalne.css" />
  2. <link rel="stylesheet" href="style_datepickera.css" />


Możesz też zastosować bardziej szczegółowy selektor css na przykład zamiast:

Kod
tr.klasa


używać:

Kod
table.datepicker tr.klasa
Crozin
@kwantOne: Kolejność deklaracji reguł ma marginalne znaczenie w kontekście kaskadowości stylów CSS.

@markonix: Nie da się czegoś takiego zrobić. Najlepszym wyborem mimo wszystko będzie :not(). A użytkownikami starych przeglądarek się nie przejmuj. To nie jest kwestia tego czy zobaczą stronę czy nie, czy będzie ona zdatna do normalnego działania czy nie. To najprawdopodobniej jedynie kwestia detali, które nie uniemożliwiają korzystanie z serwisu.
kwantOne
Cytat(Crozin @ 5.07.2011, 11:11:21 ) *
@kwantOne: Kolejność deklaracji reguł ma marginalne znaczenie w kontekście kaskadowości stylów CSS.


Hmm... Kolejność ma podstawowe znaczenie. Style zadeklarowane (dla tego samego selektora) "poniżej" nadpiszą style zadeklarowane "powyżej". http://www.kurshtml.edu.pl/css/kaskadowosc...wstawianie.html

Przedstawiony w tym temacie problem ma sporo wspólnego z resetowaniem/nadpisywaniem (CSS Reset) domyślnych styli przeglądarki, gdy chcemy aby nagłówki nie były wytłuszczone to musimy to zadeklarować w naszym arkuszu stylów przez font-weight:normal;.

W tym przypadku najlepszym wyjściem jest nadanie wszystkim datepickerą unikalnej klasy i "zresetowanie" niechcianych styli globalnych naprzykład:
Kod
th {
text-decoration: underline;
}

.datepicker th {
text-decoration: none;
}

i w ten sposób będzie to działać we wszystkich przeglądarkach.
thek
@kwantOne: Nie to miał na myśli Crozin smile.gif Nawet reguła w 150 linii może być "olana", jeśli definicja elementu w 10 linii ma "wyższą punktację" niż ta dalsza. Poczytaj raz jeszcze o kaskadowości, a możesz się zdziwić. Resetowanie polega na użyciu selektora globalnego, który ma minimalną wartość, ale zrobi co ma zrobić i każda kolejna reguła niemal na bank będzie miała większą ilośc punktó, więc jego zmiany "nadpisze", zostawiając te, których nie obejmuje nowa definicja.
kwantOne
@thek Ja też nie to miałem na myśli smile.gif , inline style nadpisze nawet najbardziej szczegółowy(punktowany) selektor zawarty w linkowanym arkuszu stylów itd.

Ale wracając do tematu postawionego przez autora, najlepiej aby przygotować z góry plugin na ewentualność gdy na stronie będzie ustawiony jakiś konkretny np. padding dla tabel lub czcionka inna niż zamierzona w designie. A osiągnąć to może właśnie przez zastosowanie bardziej szczegółowych stylów
Crozin
@kwantOne: Jak sam zauważyłeś kolejność ma znaczenie tylko w przypadku gdy mamy takie same selektory, a dokładniej rzecz biorąc selektory o takiej samej mocy. W praktyce dosyć rzadko się takie coś zdarza. Co więcej dokładnie czegoś takiego - konieczności nadpisywania ustalonych przez jQueryUI styków - chciał uniknąć autor wątku. Stąd też to marginalne znaczenie kolejności deklaracji w moim poście.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.