X'inhu CSS? Folji tal-Istil Cascading, CSS Responsive, CSS Sassy, Ikkompressa, Imnaqqas, Unminify, Għodda Uncompress

X'inhuma Cascading Style Sheets (CSS)?

Douglas Karr Il-Ħamis, Frar 9, 2023

1 104 4 minuti jinqraw

Aqra hawn taħt għal spjegazzjoni sħiħa ta' kif jaħdmu l-stylesheets cascading. Aħna nuru l-apps tagħna fin-naħa ta' fuq tal-paġna sabiex tkun faċli biex issibha u tużaha. Jekk qed taqra dan l-artikolu permezz ta' email jew feed, ikklikkja fuq ikkompressa CSS tiegħek.

Sakemm ma tkunx qed tiżviluppa siti fil-fatt, tista' ma tifhimx bis-sħiħ il-folji tal-istil cascading (CSS). CSS hija lingwa tal-istil użata biex tiddeskrivi d-dehra u l-ifformattjar ta’ dokument miktub fih HTML or XML. CSS jista 'jintuża biex jispeċifika l-istili għal diversi elementi bħal font, kulur, spazjar, u tqassim. Is-CSS jippermettilek tissepara l-preżentazzjoni tad-dokument HTML tiegħek mill-kontenut tiegħu, u tagħmilha aktar faċli li żżomm u taġġorna l-istil viżwali tal-websajt tiegħek.

Struttura tal-Lingwa CSS

il selettur huwa l-element HTML li trid stil, u l- proprjetà u valur iddefinixxi l-istili li trid tapplika għal dak l-element:

selector {
  property: value;
}

Pereżempju, is-CSS li ġej se jagħmel kollox <h1> elementi fuq paġna għandhom kulur aħmar u daqs tat-tipa ta' 32px:

CSS

h1 {
  color: red;
  font-size: 32px;
}

output

Intestatura

Tista' wkoll tispeċifika CSS għal ID unika fuq element:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

output

Intro

Jew applika klassi f'diversi elementi:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

output

Irrid li jenfasizzaw kelma fit-tikketta span.

Tista' tinkludi CSS fid-dokument HTML tiegħek fi tliet modi:

Inline CSS, bl-użu tal- style attribut fuq element HTML

CSS intern, bl-użu ta' a <style> element fil- <head> tad-dokument HTML tiegħek
CSS estern, billi tuża fajl .css separat marbut mad-dokument HTML tiegħek billi tuża l- <link> element fil- <head> tad-dokument HTML tiegħek

CSS li jirrispondu

CSS huwa oerhört flessibbli u jista 'jintuża biex jaġġusta l-wiri ta' elementi abbażi tar-riżoluzzjoni tal-iskrin, sabiex ikollok l-istess HTML imma tibnih jirrispondu għar-riżoluzzjoni tat-tagħmir:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

Kompressjoni CSS

Tista 'tara fl-eżempju ta' hawn fuq li hemm kumment, mistoqsija tal-midja, u stili multipli li jużaw spazji u line feeds biex jorganizzaw il-veduta tas-CSS. Hija prattika kbira li timminimizza jew tikkompressa CSS tiegħek fuq is-sit tiegħek biex tnaqqas id-daqsijiet tal-fajls u, sussegwentement, iż-żmien li tieħu biex titlob u tirrendi l-grafika tiegħek. Mhuwiex ammont żgħir... tista' tara tfaddil ta' aktar minn 50% fuq xi wħud mill-eżempji ta' hawn fuq.

Ħafna konfigurazzjonijiet tas-server joffru għodod li awtomatikament jikkompressaw is-CSS fuq il-fly u jżommu fil-cache l-fajl minifikat sabiex ma jkollokx għalfejn tagħmel dan manwalment.

X'inhu SCSS?

Sassy CSS (SCSS) huwa preproċessur CSS li jżid funzjonalità u sintassi addizzjonali mal-lingwa CSS. Huwa jestendi l-kapaċitajiet tas-CSS billi jippermetti l-użu ta 'varjabbli, mixins, funzjonijiet, u karatteristiċi oħra li mhumiex disponibbli fis-CSS standard.

Vantaġġi SCSS

Mantenibbiltà mtejba: Bl-użu ta 'varjabbli, tista' taħżen il-valuri f'post wieħed u terġa' tużahom matul il-stylesheet tiegħek, u tagħmilha aktar faċli li żżomm u taġġorna l-istili tiegħek.
Organizzazzjoni aħjar: Bil-mixins, tista’ tiġbor u tuża mill-ġdid settijiet ta’ stili, u b’hekk il-folja tal-istil tiegħek tkun aktar organizzata u aktar faċli biex tinqara.
Żieda fil-funzjonalità: SCSS jinkludi ħafna karatteristiċi mhux disponibbli fis-CSS standard, bħal funzjonijiet, strutturi ta' kontroll (eż. jekk/ inkella), u operazzjonijiet aritmetiċi. Dan jippermetti stil aktar dinamiku u espressiv.
Prestazzjoni aħjar: Il-fajls SCSS huma kkompilati f'CSS, li jistgħu jtejbu l-prestazzjoni billi jnaqqas l-ammont ta 'kodiċi li jeħtieġ li jiġi analizzat mill-browser.

SCSS Żvantaġġi

Kurva tat-tagħlim: SCSS għandu sintassi differenti minn CSS standard, u jkollok bżonn titgħallem din is-sintassi l-ġdida qabel ma tkun tista' tużaha b'mod effettiv.
Kumplessità addizzjonali: Għalkemm SCSS jista' jagħmel il-folja tal-istil tiegħek aktar organizzata u aktar faċli biex tinżamm, tista' wkoll tintroduċi kumplessità addizzjonali fil-codebase tiegħek, speċjalment jekk m'intix familjari mal-karatteristiċi u s-sintassi l-ġodda.
Għodda: Biex tuża SCSS, ikollok bżonn kompilatur biex jittraduċi l-kodiċi SCSS tiegħek f'CSS. Dan jeħtieġ setup u għodda addizzjonali, li jistgħu jkunu ostaklu għad-dħul għal xi żviluppaturi.

F'dan l-eżempju hawn taħt, il-kodiċi SCSS jagħmel użu minn varjabbli biex jaħżen il-valuri ($primary-color u $font-size) li jistgħu jerġgħu jintużaw matul il-stylesheet. Il-kodiċi CSS li huwa ġġenerat minn dan il-kodiċi SCSS huwa ekwivalenti, iżda ma jinkludix il-varjabbli. Minflok, il-valuri tal-varjabbli jintużaw direttament fis-CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Karatteristika oħra ta 'SCSS li hija murija f'dan l-eżempju hija stili nested. Fil-kodiċi SCSS, il- h1 stili huma nested fi ħdan il- body stili, li mhux possibbli fis-CSS standard. Meta l-kodiċi SCSS jiġi kkompilat, l-istili nested jiġu estiżi fi stili separati fil-kodiċi CSS.

B'mod ġenerali, SCSS jipprovdi ħafna vantaġġi fuq CSS standard, iżda huwa importanti li tikkunsidra l-kompromessi u tagħżel l-għodda t-tajba għall-proġett tiegħek ibbażata fuq il-ħtiġijiet u r-restrizzjonijiet tiegħek.