style - Kody, triki, sztuczki

20 listopad 2019

Jak usunąć nadmiarowy css, tailwindcss, purgecss oraz postcss

Każdy wie, że największą bolączką obecnych stron jest nadmiarowość wszelakiego kodu. Często same style dochodzą do 1MB a gdzie reszta, DOM, obrazki, skrypty, analityka google, reklamy? Do tego wszystkie te pliki css, js itd. ładowane są za jednym razem.

Większość z nas aby przyspieszyć sobie pracę korzysta z css frameworków. Czy to będzie bootstrap, semantic ui, materialize css, fundation i mógłbym jeszcze tak wymieniać i wymieniać. Najlepiej sami zobaczcie ile tego jest - awesome-css-frameworks, ale czy na pewno potrzebny nam jest cały kod np. takiego bootstrapa, no raczej nie?

Frameworki te mają też jedną poważną wadę, przynajmniej dla mnie, składają się z komponentów które jeżeli chcemy zmodyfikować to musimy nieźle się nagimnastykować z !important. Wszystko trzeba nadpisywać!.

A może by tak użyć frameworka, który nie będzie posiadał komponentów ale czyste style. Wiąże się to oczywiście z pisaniem wszystkie we własnym zakresie, ale tak możemy użyć Tailwindcss, poniżej informacja ze strony czym dokładnie jest ten framework.

Czytaj dalej

24 lipiec 2012

Zmiana koloru kropki markera LI

<style>
  .color li { color: red; }
  .color li span { color: #000; }
</style>
<ul>
 <li><span>kropka</span></li>
</ul>

9 lipiec 2010

Ustawienie kolejności warstw za pomocą z-index

<html>
<head>
  <style>
    .rel {
      height: 20px;
      position: relative;
      background: #CCFFFF;
    }

    .dymek {
      left: 10px;
      position: absolute;
      background: #FFFFCC;
      font: normal 12px Arial, Verdana, Tahoma, Helvetica, sans-serif;
      padding: 5px;
      border: #CCCCCC 1px solid;
      width: 150px;
    }

    #rd1 {
      z-index: 13;
    }

    #rd2 {
      z-index: 12;
    }

    #rd3 {
      z-index: 11;
    }

    #rd4 {
      z-index: 10;
    }
  </style>
</head>

<body>
  <div id="rd1" class="rel">
    <div id="d1" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
  <div id="rd2" class="rel">
    <div id="d2" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
  <div id="rd3" class="rel">
    <div id="d3" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
  <div id="rd4" class="rel">
    <div id="d4" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div>
  </div>
</body>

</html>

3 marzec 2009

Domyślne style dla tagów H1..H6

h1, h2, h3, h4, h5, h6, p, form { margin: 0; padding: 0; }

oczywiście można jeszcze prościej, czyli na samym początku styli dodać nawet przed samym body {}:

* {
 margin: 0;
 padding: 0;
}

2 marzec 2009

Prosty zestaw styli do formularzy

body {background:white;line-height:17px;font-size:12px;font-family:tahoma, arial, helvetica, sans-serif;}
form  { padding: 0px; margin: 0px; display: inline; }
input { cursor: hand; }
.lista td { border-bottom: 1px solid #EDEDED; }
.lista td { padding-left: 10px; padding-right: 10px; }
.lista td .button { text-align: center; }