Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

Rövidítsd a CSS-t! Shorthand trükkök

2021. augusztus 26. | Bognár Péter

# # # # #

Kódolni szép, nemes tevékenység, ez a webdesigner fegyvertárában a legfontosabb eszköz. A kód alapos ismerete kikerülhetetlen, és még ma is sokszor jut olyan helyzetbe az ember – még ha a legmodernebb, vizuális szerkesztőkkel is dolgozik, – hogy elő kell venni a CSS, javascript vagy éppen HTML tudását, ha el akarja érni a megtervezett célokat.

A szabadfogású, puszta kezes kódolásnak persze van egy kis hátulütője: rengeteget kell gépelni. A modern szerkesztőprogramok ebben is igyekeznek alánk nyúlni, de azért mindig örül az ember, ha talál valami módszert a beírandó részek lerövidítésére. Szerencsére a CSS rendelkezik néhány beépített rövidítési opcióval, ezeket nevezzük CSS Shorthandnek. Ezek a megszokott többsoros, alapos körülírás helyett egyetlen tulajdonság után egy sorban tartalmazzák az összes oda tartozó beállítást. Nézzük meg őket közelebbről!

“Kapcs. ford.!” Csak röviden! (Kép: Mafab.hu)

Öt alapvető tulajdonságot szeretnék bemutatni: 

  • font
  • background
  • border
  • margin
  • padding 

Ahogy láthatjuk, a leggyakrabban használt, legalapvetőbb formázási tulajdonságok kerülnek terítékre. A legfontosabb dolog előre tisztázni a shorthandek használatakor, hogy a megszokott CSS tulajdonságokkal ellentétben a sorból kihagyott értékeket egy ilyen utasítás nem érintetlenül hagyja (azaz nem megöröklik a korábban beállított értékeket), hanem visszaállítja az alaphelyzetre (tehát úgy veszi, hogy a parancssor minden tulajdonságot beállít, ami nincs szóba hozva, azt úgyis mindenki tudja, hogy mire.). Ez persze azt jelenti, hogy az alábbi példában:

background-color: red;
background: url(images/bg.gif) no-repeat left top;

A háttér nem piros lesz, hanem a be nem állított alapszín, tehát  átlátszó. (Ez nem minden esetben van így, vannak kihagyható beállítások, de biztosabb, ha ebből indulsz ki) 

Font

Ez a CSS tulajdonság rögtön egy fekete ló, ugyanis minden a Shorthandekkel foglalkozó cikk megemlíti, viszont a W3 Schools és a Can I use is figyelmeztet, hogy a tulajdonság már elavult, és a nagy böngészők ki fogják vezetni a használatból. 

Kép: caniuse.com

Hosszú kód:

ont-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

Rövidített kód:

font: italic bold .8em/1.2 Arial, sans-serif;

Background

Hosszú kód:

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

Rövidített kód:

background: #000 url(images/bg.gif) no-repeat left top;

Border

Hosszú kód:

border-width: 1px;
border-style: solid;
border-color: #000;

Rövidített kód:

border: 1px solid #000;

Margin és Padding

Ez a két tulajdonság persze ugyanúgy működik. Itt azt kell észben tartani, hogy mivel nem definiáljuk az értékek hova tartozását, a megadott 1-4 szám mindig ugyanabban a mintában érvényesül:

1 szám: minden oldal egyenlő

4 szám: felülről indulva, óramutató szerinti irányban a keret négy oldala

2 szám: a két-két egymással szemközti oldal egyenlő, előbb a felső, aztán az oldalsó értékek

3 szám: fent, (két)oldalt, lent

Hosszú kód:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

Rövidített kód:

margin: 10px 5px 10px 5px;

A példákat a developer.mozilla.org-ról kölcsönöztem, ahol megtalálhatod a további CSS shorthand tulajdonságok listáját és részletesebben is olvashatsz a használatukról.

Iratkozz fel YouTube csatornákra!

blog

Virtuális asszisztens legyél vagy webdesigner?

Virtuális asszisztens legyél vagy webdesigner?

2024. február 01.

Mindkettő fantasztikus lehetőség arra, hogy elhagyd a hagyományos kereteket, mint szoros, rugalmatlan munkaidő, helyhez kötöttség vagy akár a bérplafon. Egy ponton találkozik is a két munkakör, ahol a grafikai munka már az asszisztenciába hajlik – designerként is végezhetsz weboldal adminisztrációt, közösségi média tartalom készítést vagy felügyeletet és virtuális asszisztensként is sokszor találkozni már-már tervezői munkába […]

Tovább a cikkre
Secured By miniOrange