Category: CSS

Все повече и повече CSS3 навлиза в Интернет пространството. Предлагат ни се нови и все необходими свойства като text-shadow, box-shadow, border-radius, transforms и още и още.

Но колкото повече свойства изискват, толкова повече си задаваме въпроса: “Какво друго може да ни се предложи?”. Ето част от моите хрумвания по въпроса.

1. Избирателна повторяемост на фона
   Винаги съм искал да вкарам всичко в една картинка или така нареченият “sprite”. Когато елемента, на който трябва да се сложи фон, е с точно определена ширина и височина всичко е ОК. Но ако трябва една картинка да се разпростре по цялата дължина или височина на елемента трябва да се прави отделен sprite или отделна картинка. Чудесено би било ако можеше да указваме от коя картинка да се отреже, какво да е името на сектора (за да може да се обръщаме към него и занапред), откъде да се отреже и с какви размери.  Ако въпросният сектор се и кешира за следващо използване всичко би било на шест. Ето един пример как би изглеждала подобна директива.

   background-crop: url( ‘/path/to/sprite.jpg’ ), name( ‘footerbg’ ), from( 10px 20px ), size( 5px 10px );
   background: use( ‘footerbg’ ) repeat-x top left
   

   За: Намаляват се броя на заявките към сървъра. В най-добрият случай ще трябва само едно сваляне.
   Против: Това временно отрязване на картинката ще бави рендването на страницата.

2. Константи!
   В общия случай не е толкова фрапантна липсата на константи в CSS. Може да се направят множествени селекти на елементите, които трябват да имат еднакъв цвят,  фон или рамка. Но какво ще стане ако искаме елементите от header-а да имат определен цвят (на текста), който да е същият както border-а на footer елементите? Трябва два пъти да дефинираме този цвят – един път за border-а и един път за color-а. А какво става когато този цвят трябва се замени. Find and replace? Може би. Но защо не е по-културно решение с константа? Пример:
   
   /* Define a simple constant */
   constant {
   name: ‘mainColor’;
   value: ‘#FF00FF’;
   }

   /* Usage */
   #header {
   background-color: $mainColor;
   }

   Прекрасно, нали?

   За: По-добре поддържан код.
   Против: Ако се вкарат константи, някой ще поиска и условни конструкции и CSS от описателен език, ще се превърне в изпълним. И тук пак идва проблема с производителността.

3. Еднаквост на размерите на два и повече елемента.
   Най-баналният пример за това свойство е многоколоннта решетка. Две колони – лява и дясна, като дясната трябва винаги да е с височината на лявата. Въпреки че има добри решения на този проблем и сега, би било далеч по-лесно ако се добави правило за уеднаквяване на размерите на избраните елементи. Пример:
   
   #leftColumn, #rightColumn {
   eq-height: true;
   }
   #header, #footer {
   eq-width: true;
   }
   
   За: Изграждането на колонни и грид структури ще бъде много по-лесно.
   Против: Е, тук нещо против тази директива не мога да се сетя 🙂

Ако и вие се сещате за подобни добри идеи, споделете ги в коментарите. А на мен ако ми дойдат още идеи и аз ще ги споделя.

Забележка: Това не са валидни CSS правила!