Как да подходим към CSS оформлението през 2017 г. и след това.

Ще ви помогна да разберете как трябва да подходите към съвременните оформления в CSS - това е 2017 г. и много наистина се промени.

Какво ще научите

  1. Как се обработваха CSS оформленията преди
  2. Разликите между миналите подходи и съвременните стандарти
  3. Как можете да започнете с новите стандарти днес (Flexbox и Grid)
  4. Защо трябва да се интересувате от тези съвременни стандарти

Въведение

Не помня точно кога, но мисля, че през 2012 или 2013 г. бях запознат с уеб разработката. Съвсем меко казано, опитах да уча самостоятелно.

С CSS много неща имаха смисъл, с изключение на създаването на интелигентни CSS оформления. Имаше толкова много хакове за оформление, че не можах да разбера себе си.

1. Как се обработваха оформления на CSS преди

Проблемът:

Нека да разгледаме един доста стандартен проблем.

Как да създадете две секции от страници - странична лента и основна област със съдържание с равни височини, независимо от размерите им на съдържание?

Вижте пример за това, към което се стремим по-долу:

Области на страничната лента и основното съдържание с равни височини, независимо от размерите им на съдържание

Досега ето как може да сте решили проблема.

(i) Създайте div с два елемента, напр. an

<Тяло>
  <Настрана>
    Lorem ipsum dolor sit amet.
  
  
  <Основната>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Eenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla posleat massa quis enim.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Eenean commodo ligula eget dolor. Енейска маса. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla posleat massa quis enim.
  

Очевидно има повече текстове в основния раздел.

Дайте на страницата настрана някакъв цвят, така че да е различим.

.настрана {
   цвят: #fff;
   цвят на фона: # 8cacea;
}

(ii) Направете и двете секции да изглеждат една до друга

За да останат и двете секции една до друга, ще направите това:

настрана {
  ширина: 25%;
}
главен {
  ширина: 75%;
}
настрана,
основната {
  плувка: вляво;
}

Стилът по-горе разделя наличната ширина в определени пропорции и след това плава както встрани, така и в основните области на съдържанието.

По-долу е резултатът:

Две съдържания са едно до друго

Ако не сте наясно с използването на поплавъци, това е сравнително стара техника за преместване на елементи в посочена посока, наляво или надясно

Погледнете изображението по-горе, проблемът все още не е решен. Височината на страничната лента не е същата като тази в областта на основното съдържание.

Нека решим проблема най-накрая

(iii) Използвайте рана за показване на таблицата

За да решите проблема с различни височини, трябва да използвате хак дисплей на таблицата - аз наистина мразя този хак, между другото.

Ако НЕ сте запознати с този хак, ето какво да направите.

(а) Направете родителския контейнер (в този случай тялото елемент) таблица.

тяло {
  дисплей: таблица;
}

(b) Извадете поплавките и направете клетките на дъщерните елементи на таблицата

Детските елементи в този пример са зоните настрана и основните съдържание.

настрана,
основната {
  дисплей: таблица-клетка;
}

След като това е направено, проблемът е доста решен - поне така се е случвало.

И двете области на съдържанието сега имат еднакви височини

2. Разликите между миналите подходи и съвременните стандарти

След като вече имате представа как проблемът е решен преди това, нека разгледаме какво представят Flexbox и Grid на масата.

Flexbox и Grid са перфектните CSS решения за оформление - съвременните стандарти. Ако трябва да напишете CSS на разумно ниво, тогава инвестирането в Flexbox и Grid образование е безценно.

Как решавате същия проблем с Flexbox?

Контекстът на форматиране на Flexbox се стартира чрез създаване на гъвкав контейнер.

Забравете езика, това е доста лесно.

Родителският елемент тук е елемента на тялото. В него се помещава страничната лента и основното съдържание. Така че, направете го гъвкав контейнер:

тяло {
  дисплей: гъвкав;
}

И вие получавате това:

Flexbox в действие

Включително дисплей: flex стартира модела Flexbox и инициира контекст на форматиране на flexbox.

Не забравяйте пропорциите:

настрана {
  ширина: 25%;
}
главен {
  ширина: 75%;
}

Voila! Проблемът вече е доста решен.

Проблема решен.

Видяхте ли колко лесно беше това? Прост и четим код, плюс НЕ луди хакове.

Има много повече неща, които бихте могли да направите с Flexbox, като например:

(a) Центрирайте страничната лента и основната зона на съдържание по вертикалната ос

html, body {
  височина: 100%;
}
тяло {
  подравняване-елементи: център;
}
SIdebar и основната зона на съдържание, центрирана по вертикалната ос

(б) Поставете отново само един от предметите за деца

настрана {
  подравняване-само: център;
}
Страничната лента се премести в центъра на вертикалната ос

(c) Променете реда на източника на дъщерния елемент, без да засягате html документа

настрана {
  ред: 2
}
Сега страничната лента изглежда сякаш е поставена след основната област на съдържание в html документа

Надрасках само повърхността на възможното с Flexbox модела.

Говорете за гъвкавост и лекота, моделът Flexbox доставя точно това!

Как решавате същия проблем с Grid?

CSS Grid оформлението е най-доброто решение за оформление. С него идва и много мощност.

Нека разгледаме накратко как същият проблем може да бъде решен с помощта на Grid оформлението.

Точно като Flexbox, процесът започва точно по същия начин.

Направете елемента на контейнера решетка контейнер.

тяло {
  дисплей: решетка;
}

Ако ви е любопитно, ето всички CSS в този момент:

тяло {
  дисплей: решетка;
  цвят на фона: #eeeeee;
}
настрана {
   цвят: #fff;
   цвят на фона: # 8cacea;
}

И това е, което имате:

Начален дисплей

ЗАБЕЛЕЖКА

За да използвате оформлението на Grid, трябва да имате съвместим браузър като новия Firefox 52 или Chrome 57.

Изображението по-горе не прилича на нещо магическо. Е, все още не.

Ами ако разделите пропорциите на ширината, както сме направили в горните случаи:

настрана {
  ширина: 25%;
}
главен {
  ширина: 75%
}

Това има ли значение?

Разделяне на пропорциите на ширината на елементите на дъщерната мрежа

Има значение, но НЕ вида, който сте очаквали. Областите на страничната лента и основното съдържание все още не са една до друга.

Това ме навежда на обяснение на важна част от използването на Grid Layout.

След като настроите контейнер за решетка с дисплея: grid, трябва да определите как да подреждате редове и колони в този контейнер за мрежа.

Как правиш това?

тяло {
  решетка-шаблон-колони: 30% 70%;
}

Еднолинейният пестил спестява деня. Няма нужда да определяте отново ширините на страничната лента и основните секции със съдържание.

grid-template-column определя пропорциите, в които се полагат колоните в мрежата

Проблема решен.

Ако ме попитахте, това е впечатляващо Без разхвърлени хакове.

Има още повече неща, които можете да направите с оформлението на Grid - много повече.

Първо, дайте на основния раздел малко цвят, така че примерите, които идват след това, са още по-визуални.

главен {
  цвят на фона: rgba (39,174,96, 1);
  цвят: #fff;
}

Ето какво трябва да имате:

Сега, нека да видим някои от добрите неща, които Grid оформлението има за вас.

(а) Можете да определите пропуски между колоните

тяло {
  решетка-колона-празнина: 15px;
}

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

Сега имате празнина между колоните - много по-спретнато!

Не е необходимо да добавяте маржове встрани или основни

grid-column-gap определя разстоянието (или празнината) между колоните в мрежата.

(б) Можете да имате толкова колони (или редове), колкото искате

Примерите по-горе са използвали само един страничен елемент и основен елемент. Ще добавя още две от тях.

<Тяло>
  <Настрана>
    Lorem ipsum dolor sit amet.
  
  
  <Основната>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Eenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla posleat massa quis enim.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Eenean commodo ligula eget dolor. Енейска маса. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla posleat massa quis enim.
  
  
    <Настрана>
    Lorem ipsum dolor sit amet.
  
  
  <Основната>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Eenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla posleat massa quis enim.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Eenean commodo ligula eget dolor. Енейска маса. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla posleat massa quis enim.
  
  
    <Настрана>
    Lorem ipsum dolor sit amet.
  
  
  <Основната>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Eenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla posleat massa quis enim.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Eenean commodo ligula eget dolor. Енейска маса. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla posleat massa quis enim.
  
  

Без да прави никакви промени в CSS, подредбата на Grid разбира точно какво да прави.

Колоните все още запазват 30% - 70% оформление

#EDIT: макар това да няма нищо общо с CSS Grid, трябва да имате само един основен елемент на страница. Благодаря, Джейсън Бърнет. Тук направих сляп copy-n-paste.

(b) Можете да определите пропуски в редовете

Подобно на пропуските в колоните, наблюдавани по-рано, вие също можете да определите пропуски в реда.

тяло {
  мрежа-ред-празнина: 15px;
}
Задават се пропуски в редовете.

За по-лесно е налице стенограма, ако и пропуските в реда и колоните са еднакви. Просто използвайте grid-gap: 15px, вместо да задавате grid-row-gap и grid-column-gap на 15px

(c) Можете да определите размерите на редовете

Както сте определили относителните размери на колоната с решетка, можете да направите същото за редовете.

тяло {
  решетка-шаблон-редове: 200px 300px 400px;
}
Различни размери на реда

Сега първата, втората и третата колона заемат височините, съответно 200px, 300px и 400px.

Нямам намерение да показвам всичко, което е възможно с оформлението на Grid тук, но това е доста добро въведение.

Както можете да видите, тук има много супермодели за оформление - всички на ваше разположение.

3. Как можете да започнете с новите стандарти днес (Flexbox и Grid)

Видяхте поглед върху това как моделите CSS Flexbox и Grid осигуряват по-добри и надеждни решения за оформление. И така, как да започнете с тях?

За леко въведение, препоръчвам ви да практикувате добре примерите в тази статия. След това можете да преминете към изучаване на още по-дълбоки понятия.

В момента Grid оформлението не разполага с голяма поддръжка на браузър, но можете да експериментирате сега и да го използвате в поддържани браузъри чрез заявки за функции.

В заключителния раздел на тази статия включвам връзки към това как мога да мога да ви помогна да постигнете по-задълбочено разбиране на съвременните CSS оформления - Flexbox и Grid.

4. Защо трябва да се грижите за тези съвременни стандарти?

Ако все още не сте разбрали защо трябва да се интересувате от Flexbox и Grid, ето няколко проблеми, които може да срещнете с предишни решения за оформление.

(i.) Ако в момента използвате floats и clearfix хакове, тогава знаете, че това може да се обърка

(ii.) Рискувате елементите да се припокриват при абсолютно позициониране - тъй като този метод на позициониране извежда елементите от документооборота.

(iii.) Имате много излишни маркировки, ако сте използвали display: таблица за оформления.

(iv.) Ще срещнете проблеми, свързани с бялото пространство, ако използвате вграден блок за решения за оформление.

За да бъда честен, ако едва започвате с уеб разработка и не смятате, че вашите html и css са много добри, може да не ви пука за Flexbox и Grid. Вашето решение може да бъде Bootstrap или някаква друга популярна рамка.

Ако не искате някои от предупрежденията да използвате такива популярни рамки, обичате тръпката да си правите неща или може би мислите напред, моят съвет би бил да получите прилично образование за Flexbox и Grid.

Знам, че сте харесали тази статия, затова я препоръчайте и помогнете на някой друг да научи нещо ново

Искате ли да станете професионалист?

Изтеглете безплатния ми CSS Grid чит лист, а също и безплатно получете два качествени интерактивни курса Flexbox!

Вземете безплатно CSS Grid Cheat sheet + Два качествени Flexbox курса безплатно!

Вземете ги сега