Проблем са процентима у ЦСС-у

Не тако давно, потпуно смо се ослањали на коришћење процената за ширину и висину. Коришћење процената значило је да ваш изглед и елементи могу да претпоставе висину и ширину на основу прозора за приказ. Али како савремени ЦСС наставља да се развија, дошли смо до тачке у којој би можда чак било добро избегавати коришћење процената.

Сазнајте о уобичајеним проблемима на које ћете наићи када користите проценте. Такође сазнајте о модерним ЦСС техникама које можете користити уместо процената. Ове технике ће вам дати исти резултат као проценте без икаквих недостатака.

Веома једноставан пример мреже

Да бисте демонстрирали проблем са јединицама процента, размотрите овај ХТМЛ изглед:

<дивкласа="контејнерми-грид">
 <дивкласа="грид-итем">
див>
 <дивкласа="грид-итем">
див>
див>

Спољашњи елемент је основни див елемент контејнера са два див деца. Свако дете има а грид-итем класа. Да претворимо контејнер у мрежу са две колоне (два поља), мораћемо да применимо следећи ЦСС код:

тело {
боја позадине: црн;
алигн-итемс: центар;
оправдати-садржај: флек-старт;
}
.ми-грид {
приказ: грид;
грид-темплате-колумнс: 50% 50%;
маргина: 3рем;
граница: 2пкчврстзлато;
паддинг: 1рем;
}
.грид-итем {
граница: 3пкчврстзлато;
паддинг: 10рем 0;
позадини: Плави;
}

Дакле, свака колона (ставка мреже) има позадину златне боје. На родитељској класи контејнера постављамо мрежа-шаблон-колона до 50% за сваку колону. Као резултат, обе кутије заузимају 50% укупне ширине елемента контејнера.

Ево резултата:

Али постоје проблеми са овим усклађивањем. Прво, ако сте одлучили да додате а јаз матичној мрежи, дете би могло да се прелије са стране. На пример, ако бисте додали размак: 3пк до .ми-грид блок у ЦСС-у, онда ево како би изглед изгледао:

Као што можете видети на горњој слици, десна кутија се померила из контејнера. Понекад то можда нећете приметити јер је ваш размак довољно мали, што доводи до чудног проблема са поравнањем. Али ако сте имали већи јаз, онда преклапање постаје сасвим очигледно.

Кад год користите проценте и додајете маргине или празнине, постоји огромна шанса да ћете наићи на овакве грешке. Али зашто долази до грешке?

То је зато што је свака колона 50% надређена. У горњем примеру имамо 50% плус 50% плус тај размак (3пк), који гура кутију из контејнера.

Имајте на уму да се ова грешка не дешава само са 50-50. Можете поставити прву колону на 75%, другу колону на 25% и грешка ће се и даље појавити. Због тога морате чешће да користите следеће решење.

Решење са фракционим вредностима

Решење је коришћење разломака уместо процената. Дакле, уместо да поставите прву колону на 75%, а другу на 50%, можете поставити прву колону на 3фр, а другу колону на 1фр:

грид-темплате-колумнс: 3фр 1фр

Ово задржава исти однос као и први пример. Али предност коришћења фр јединица је да користе делић расположивог простора. У овом случају, прва колона заузима три дела простора, док ће друга колона заузимати један део, не укључујући празнину.

Још једна предност коришћења фрс у односу на проценте—или друге апсолутне јединице, попут пк или ем—је да их можете комбиновати са фиксним вредностима. Ево примера:

грид-темплате-цолумнс: 1фр 10рем;

Са горњим кодом, добићете фиксну вредност која се никада не мења без обзира на величину екрана. То је зато што ће колона са десне стране увек остати на 10 рем, док ће колона са леве заузети преостали простор (минус празнина).

Понекад се можете извући користећи проценте. Али морате их користити на паметан начин који се и даље може прилагодити ситуацији. Често то значи да их упарите са фр вредност.

Реалнији пример

Замислимо да имате страницу која садржи главни део садржаја и страну (за повезане постове). Главна област садржаја заузима три дела екрана, док са стране заузима преостали простор минус празнина:

.контејнер {
ширина: 100%;
приказ: грид;
грид-темплате-колумнс: 3фр 1фр;
јаз: 1.5рем;
}
.картица {
боја позадине: #5А5А5А;
паддинг: 10пк;
маргина-дно: .5рем;
}

Ево резултата:

Обично бисте померили бочну траку (или у страну) на дно (или врх) странице када екран постане преузак. То значи да поставите медијске упите који све стављају једно на друго када оквир за приказ достигне одређену тачку прекида.

Ево како све можете да сложите у колону када оквир за приказ достигне 55 ем или мање:

@медиа(максимална ширина: 55ем) {
.контејнер {
приказ: флек;
флек-дирецтион: колона;
 }
}

И резултат ће изгледати отприлике овако:

Сада не желите да свака картица обухвата ширину читавог оквира за приказ. Уместо тога, карте би требало да буду једна поред друге. Најбољи начин да се то постигне је помоћу ЦСС мрежа. Али уместо постављања фиксних вредности ширине (нпр. 50%) за колону шаблона мреже, користите понављање() функционише на следећи начин:

.сидебар-грид {
приказ: грид;
грид-темплате-колумнс: понављање(ауто-фит, минмак(25рем, 1фр));
алигн-цонтент: почетак;
јаз: 2рем;
}

Овај ЦСС поставља минималну величину од 25 рем и максималну величину од 1 фр. Тај приступ је много бољи од постављања фиксних ширина јер се ослања на интринзичну величину. Другим речима, омогућава претраживачу да схвати ствари на основу доступних параметара.

Сада када смањите прозор претраживача на одређену ширину, оквир мреже се аутоматски прилагођава на два поља по реду.

Када се екран смањи, он пада на једну кутију по реду. Дакле, претраживач ставља све једно на друго. Све се ово дешава док мењате величину прозора. Можете користити функцију претраживача као што је Цхроме ДевТоолс да бисте разумели како овај ЦСС функционишеи како промена величине прозора мења изглед.

Најбољи део је што вам није потребан упит контејнера или било шта отмено да би елемент био прилагодљив. Једноставно поставите мрежу и користите мин-макс() да поставите разломке уместо фиксних величина.

Сазнајте више о ЦСС Грид-у

Ако желите да будете одлични са ЦСС-ом, потребно је да имате дубоко познавање ЦСС мрежа. Мреже могу бити прилично моћне када се добро користе. Можете постићи скоро сваки распоред који желите помоћу Мрежа. То га чини незаменљивим алатом у ЦСС-у.

Једна ствар коју треба имати на уму када користите ЦСС мреже је да се фокусирате на одзив. Такође можете користити фракциони приступ да бисте избегли случајеве судара између елемената. Не заборавите да савладате ЦСС мреже јер ће вам стил изгледа много помоћи приликом креирања веб локација.