Neo-IT



Week: 26
Uw ip adres is: 54.81.197.24

CSS

Reset css
Het verdient de aanbeveling om te starten met een "reset css".
Iedere browser heeft zijn eigen basis stijl. Daarbij hanteren ze ook hun eigen idee over maten van de elementen die je op een webpagina kunt vinden.
Om ervoor te zorgen dat alle maten gelijk zijn in iedere browser gebruik je de zgn. reset.css, deze kun je vinden op  http://meyerweb.com/eric/tools/css/reset/ of hier reset.css.
Daarna ga je aan de slag met je eigen stijl.
/*** Reset ***/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:1em;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}


Specificiteit
tag (x1) +attributen en klassen (x10) + id (x100)
De selector met de hoogste waarde overheerst en zal de stijl bepalen.

Snelheid
Hou het zo eenvoudig mogelijk, geen "div table.cursisten td.namen"
Maar gewoon ".namen" als dat enigszins kan.
Waarom? In het geval van "div table.cursisten td.namen"
worden eerst alle div's gezocht, dan alle tabellen dan wordt daarin gezocht naar alle klassen "cursisten" daarna alle td's daarbinnen en als laatste van die td's de klasse "namen".
Dus daarom verdient het de aanbeveling de selectors zo kort mogelijk te houden.

Selectors
Selectors kun je achter elkaar zetten zonder spatie: span#naam.geselecteerd.medewerker een span met als id: naam en met beide klassen: geselecteerd en medewerker.

Variabelen in css
:root{ /* vanuit de root kun je de variabele overal gebruiken */
    --neo_kleur:orange;
}
span{
    color: var(--neo_kleur);
}
Ook aan te roepen in javascript.

Overlappende elementen
Dit doe je met z-index, wanneer twee elementen die absolute,relatieve of fixed zijn gepositioneerd elkaar overlappen dan kan hoogte van de z-index bepalen welk element boven de andere ligt.

Responsive design
Dan liefst in percentages werken, soms moet je toch vaste waarden geven. Het verdient dan de aanbeveling om met em te werken omdat dit staat voor de hoogte van de letter m in het huidige font, de breedte van em is ongeveer anderhalf karakter gemiddeld. Tekst leest het best als een pagina 30 tot 40 em breed is.

Collapsing margin
Dit treedt op als twee block elementen onder elkaar liggen en de bovenste heeft een margin-bottom:3em en de onderste een margin-top:2em
zal dit resulteren in een tussenruimte van het grootste getal 3em. En dus niet 5em, een optelling van deze twee. De margins schuiven als het ware in elkaar.

Blokkeer inputs met stijl
pointer-events: none

Kruislings td in "opgetelde" kleuren
tbody td:nth-of-type(odd),
tbody tr:nth-of-type(odd),
thead th:nth-of-type(odd){
    background:rgba(255,255,136,0.5);
}

Achtergrond met geleidelijk verlopende kleuren
background:linear-gradient(to bottom, #fff, Gray);

Eerste woord van een zin in hoofdletter zetten met css
th:first-letter{text-transform: capitalize}

Een mooie manier om met een checkbox style te veranderen
table#betrokkenen input[type=checkbox]:not(:checked) + label{
      opacity:0.5;
}

Schaduw om een block element heen
box-shadow: 5px 5px 10px #888;
De waarden geven aan: horizontale schaduw, verticale schaduw, blur en kleur

Afgeronde hoeken 
border-radius:1em;

Achtergrond afdrukken in Chrome
root{-webkit-print-color-adjust:exact}
 
Opacity oftewel doorzichtigheid kun je bereiken op de volgende manieren
rgba(255,0,0,0.5); // de laatste parameter geeft de mate van opacity aan.
opacity:0.5;// opacity kun je ook apart opnemen in je stijl

Table breedte
table-layout:fixed; width:30em;
 
@font-face
Je kunt ook lettertypen van het web gebruiken, bijvoorbeeld 
@font-face { font-family: “Schoolbell”; font-style: normal; font-weight: normal;
src: local(“Schoolbell”), url(“http://themes.googleusercontent.com/static/fonts/schoolbell/v3/BSqn7FernLolrt-MFco9WhsxEYwM7FgeyaSgU71cLG0.woff”) format(“woff”);
}
 
Bij te lange tekst kun je deze laten eindigen als... 
Dit bereik je met
  text-overflow: ellipsis;
  white-space:nowrap
  width:30em;//vaste breedte

Roterende tekst
  width:130px;
  height:50px;
  -ms-transform:rotate(270deg); /* IE 9 */
  -moz-transform:rotate(270deg); /* Firefox */
  -webkit-transform:rotate(270deg); /* Safari and Chrome */
  -o-transform:rotate(270deg); /* Opera */
 
Speciale print css in de style
@media print{
  article{
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;} /*achtergrond kleur printen*/
   page-break-after:always;} /* drukt nieuwe pagina af ala “pagina einde” */
  }
  @page { /* kop en voettekst weghalen */
   size: auto;  
   margin-top: 0mm;
   margin-bottom: 0mm;
  }
}

Naast em is er ook rem
em is gebonden aan de font-size van zijn directe parent, rem is alleen afhankelijk van de html (root) font-size. Dit is handig te weten bij onder andere mobiele websites.

Met absolute element in het midden positioneren 
#laden{
    position:absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px); /* denk om de spaties */
}

Blokkeren van elementen
pointer-events:none/auto

De browser maakt "mooie" kadertjes om een geselecteerde input, om deze uit te schakelen gebruik:
input:focus{outline:0}