Powrót

css shorthand

Shorthand w CSS to skrócone zapisy, które pozwalają szybciej pisać kod i zmniejszyć jego objętość (a przy okazji plik CSS też staje się lżejszy).

  • background: #fff url(bg.png) no-repeat center top; – ⚠️ Uwaga: background shorthand nadpisuje wszystkie właściwości, więc trzeba podawać wszystko, co potrzebne.
  • background:
    url(„stars.png”) top center / 100px 50px repeat-x,
    url(„logo.png”) center center / contain no-repeat,
    #000;
  • font: italic small-caps bold 16px/1.5 „Open Sans”, sans-serif; gdzie kolejno mamy: font-style font-variant font-weight font-size/line-height font-family
  • list-style: square inside url(„icon.png”);
  • flex: 1 0 auto; gdzie kolejno to: flex-grow flex-shrink flex-basis
  • grid-row: 1 / 3; gdzie masz: grid-row-start / grid-row-end
  • transition: opacity 0.3s ease-in-out; gdzie kolejno to: property duration timing-function
  • animation: fadein 2s ease 1s infinite; gdzie masz: name duration timing-function delay iteration-count
CSS3

Hope this helps and happy coding :)

Zobacz jeszcze

optymalizacja wydajności pliku style.css

Aby przyspieszyć ładowanie stron internetowych warto pochylić się nad plikami styli css. Ich rozmiar i sposób ładowania też mają znaczenie, o to kilka przydatnych informacji: całkowity...

optymalizacja właściwości CSS

optymalna animacja elementów i poprawienie płynności GPU = Graphics Processing Unit, czyli procesor graficzny, specjalny układ scalony w urządzeniu (komputer, telefon, tablet), który...

Powrót