Kilka wskazówek oraz porad - Właściwości CSS

W tej części kursu CSS zostaną zaprezentowane porady oraz wskazówki, które będą dotyczyły właściwości CSS.

Sposób zapisywania wartości "0" oraz zapisywanie liczb dziesiętnych

Gdy chcemy podać jakąś wartość, która ma wynosić 0px, 0%, 0deg to możemy podać samo 0 bez podawania konkretnej jednostki CSS.

Przykład:

div {
  transform:rotate(0);
}

Uwaga Mogą zdarzyć się wyjątki. Takim wyjątkiem jest jednostka czasu, np. s lub ms. W tym wypadku, gdy chcemy podać wartość 0, to musimy podać ją razem z jednostką czasu, czyli 0s lub 0ms.

Z kolei liczby dziesiętne są zapisywane, w języku CSS, po kropce, np. 0.3, 0.7, 0.23, 2.45, 1.75. Gdy chcemy, aby nasza wartość była liczbą dziesiętną z zakresu 0 - 1.0, to możemy podać ją bez pierwszego 0, czyli wartość 0.23 możemy zapisać jako .23.

Przykład:

div {
  opacity:.23;
}

Efekt "opacity" w przeglądarkach Internet Explorer w wersji wcześniejszej niż 9

Właściwość opacity, która odpowiada za stopień przezroczystości elementu HTML, jest interpretowana przez przeglądarkę Internet Explorer, lecz dopiero do wersji 9. Jeżeli chcemy uzyskać efekt przezroczystości w starszych przeglądarkach niż IE9, to należy skorzystać z następującego zapisu, który jest przeznaczony wyłącznie dla przeglądarki Internet Explorer.

div {
  filter:alpha(opacity=55);
}

Zapis filter:alpha(opacity=55); dla starszych wersji przeglądarki Internet Explorer będzie oznaczał to samo co zapis opacity:0.55; dla innych przeglądarek internetowych.

Alternatywny zapis nowych wartości danej właściwości CSS

Czasami może się zdarzyć, że do języka CSS, do danej właściwości CSS została dodana nowa wartość, nowy sposób zapisywania wartości, który niekoniecznie od razu musi być interpretowany przez wszystkie przeglądarki internetowe, dlatego w takim wypadku możemy stworzyć alternatywny zapis danej właściwości CSS, który będzie rozumiany przez przeglądarkę internetową w przypadku gdy nie interpretuje ona nowego zapisu.

Przykład:

div {
  background-color:red;
  background-color:rgba(255,0,0,0.5);
}

Dzięki zapisowi, który został przedstawiony powyżej, tło elementu div będzie miało kolor czerwony, jeżeli dana przeglądarka internetowa nie interpretuje zapisu rgba. W przeciwnym wypadku, gdy przeglądarka internetowa interpretuje zapis rgba, to właściwości background-color nadpiszą się i tło elementu div będzie koloru czerwonego (255,0,0), lecz z stopniem przezroczystości równym 0.5.

Oczywiście niektóre właściwości CSS mogą być zupełnie nowe, więc nie zawsze będziemy mogli skorzystać z powyższej zależności.

Innym sposobem na rozwiązanie wspomnianego problemu jest reguła @supports.

Przedrostki, które należy dopisywać w różnych sytuacjach

Przedrostki CSS, które są przeznaczone dla poszczególnych przeglądarek internetowych, w przypadku gdy dana przeglądarka nie interpretuje nowej wartości lub właściwości, która niedawno została dodana do języka CSS, muszą być dopisywane w różnych sytuacjach, nie tylko gdy chcemy użyć danej właściwości w "normalny" sposób, w regule CSS.

Przykład:

div {
  -webkit-transform:rotate(45deg);
}

Zapis, który został zaprezentowany powyżej, jest przeznaczony dla przeglądarek internetowych, które ciągle wymagają abyśmy podawali przedrostek -webkit- dla właściwości transform. Przedrostek -webkit- dla danej właściwości transform należy używać wszędzie tam gdzie chcemy skorzystać z właściwości transform, nawet we właściwości transition-property, czy regule @supports.

Przykład:

div {
  -webkit-transition-property:-webkit-transform,color,height;
}

@supports(-webkit-transform:rotate(45deg)) {
  div {
    background-image:none;
  }
}

Zależność ta tyczy się również wartości właściwości CSS, które wymagają przedrostków.

Przykład:

@supports(display:-webkit-flex) {
  div {
    float:none;
  }
}

Różnica pomiędzy właściwością "outline", a właściwością "border"

Wizualnie właściwość outline oraz border prezentują się identycznie.

Właściwość outline nie wpływa na sąsiednie elementy HTML, tzn. nie zmienia ich położenia, nie odsuwa ich od danego elementu HTML, natomiast właściwość border wręcz przeciwnie.

Przykład:

element - div

element - div - z "outline:15px solid red;"

element - div

element - div

element - div - z "border:15px solid red;"

element - div

Właściwość outline należy rozumieć jako nierozmyty cień. Gdy do jednego elementu HTML dodamy właściwość outline oraz box-shadow to możemy uzyskać niepożądane efekty, w zależności od typu przeglądarki internetowej, dlatego należy unikać takich sytuacji.

Właściwość "border" - nieco krótszy zapis oraz przezroczysty kolor obramowania

Czasami może zdarzyć się taka sytuacja, że będziemy chcieli dodać do elementu HTML takie samo obramowanie po jego trzech różnych stronach.

Przykład:

div {
  border-top:1px solid black;
  border-right:1px solid black;
  border-bottom:1px solid black;
}

Nasz zapis możemy nieco skrócić:

div {
  border:1px solid black;
  border-left:none;
}

Gdy chcemy, aby element HTML otrzymał obramowanie, którego wcześniej nie miał, np. w momencie gdy najedziemy na ten element HTML kursorem naszej myszki, to czasami może przydać się nam zapis border:1px solid transparent; który określa przezroczyste obramowanie elementu, dzięki czemu rozmiar elementu HTML nie będzie powiększał się, gdy najedziemy na jego obszar kursorem myszki.

Skrócony zapis właściwości CSS, które należą do tej samej grupy

Gdy określamy jakieś właściwości CSS, które należą do jakiegoś większego zbioru, np. do animacji, to możemy zapisać je w następujący sposób:

div {
  animation-name:animacja-1, animacja-2;
  animation-duration:3s, 2s;
  animation-timing-function:linear, ease-in;
  animation-delay:1s, 2s;
  animation-iteration-count:infinite, 1;
  animation-direction:reverse, alternate;
  animation-fill-mode:backwards, forwards;
}

Gdy nabierzemy nieco wprawy to możemy korzystać z krótszego zapisu:

div {
  animation:animacja-1 3s linear 1s infinite reverse backwards,
            animacja-2 2s ease-in 2s 1 alternate forwards;
}

Procentowa wartość właściwości "height"

Pod spodem został przedstawiony przykładowy kod HTML części body dokumentu HTML.

<body>

  <div id="rodzic">
    <div id="dziecko">to jest przykładowy element - div</div>
  </div>

</body>

Gdy dla elementu #dziecko określimy właściwość height w procentach, to nie uzyskamy żadnego konkretnego rezultatu, chyba że element rodzic elementu #dziecko będzie miał określoną wartość wysokości, czyli właściwości height.

#rodzic {
  height:100px;
  padding:15px;
  background-color:gold;
}

#dziecko {
  height:50%;
  background-color:tomato;
}

Rezultat:

to jest przykładowy element - div

Podsumowanie

W tej części kursu zostały zaprezentowane, wybrane przeze mnie wskazówki, dotyczące różnych właściwości CSS, natomiast w następnej części kursu CSS zostaną przedstawione wskazówki oraz ciekawostki, które będą dotyczyły selektorów CSS.