5 new CSS prop­er­ties

Check out five new prop­er­ties com­ing to CSS, find out what they do and how to put them to prac­ti­cal use in your projects

Web Designer - - Contents -

Find out what they do and how to put them to prac­ti­cal use in your projects

We’re go­ing to be cre­at­ing the lay­out for a page that in­cludes a news­feed and a lit­tle chat box in the cor­ner. To do this we’ll lever­age the fol­low­ing fea­tures to cre­ate a bet­ter ex­pe­ri­ence and work around some is­sues. You’ll need Chrome 65+ or Fire­fox 59+.

• dis­play: con­tents;

• @sup­ports(...) {...} fea­ture queries • over­scroll-be­hav­ior: con­tain;

• :fo­cus-within and :place­holder-shown

pseudo-classes

• con­tain: paint;

There is a repo to ac­com­pany this tu­to­rial which con­tains the step-by-step code: https://github.com/daniel­crisp/ hot-new-css-fea­tures

1. The HTML for the news­feed

First we need to set up some su­per sim­ple, re­peat­ing markup for our news­feed. Let’s cre­ate a ‘.con­tainer’ div with an un­ordered list in­side. Give the ‘<ul>’ the class of ‘.feed’, then cre­ate 10 list-items each con­tain­ing a div with the ‘.card’ class and the text Card 1, Card 2 etc. Fi­nally cre­ate an­other list-item in be­tween 5 and 6 with a class of ‘.nested’ – this will be help­ful later – and add a ‘<ul>’ in­side with three list-items us­ing the text Card A, Card B etc. <body>

<div class=”con­tainer”>

<ul class=”feed”>

<li><div class=”card”>card 1</div></li>

<li><div class=”card”>card 2</div></li>

<li><div class=”card”>card 3</div></li>

<li><div class=”card”>card 4</div></li>

<li><div class=”card”>card 5</div></li>

<li class=”nested”>

<ul>

<li><div class=”card”>card A</div></li>

<li><div class=”card”>card B</div></li>

<li><div class=”card”>card C</div></li>

</ul>

</li>

<li><div class=”card”>card 6</div></li>

<li><div class=”card”>card 7</div></li>

<li><div class=”card”>card 8</div></li>

<li><div class=”card”>card 9</div></li>

<li><div class=”card”>card 10</div></li>

</ul>

</div>

</body>

2. Style the news­feed

Now we need to add some quick styles so that this starts to look more like a news­feed. First we can give ‘<body>’ a sub­tle grey back­ground colour. Then give ‘.con­tainer’ a max-width of 800px and use ‘mar­gin: 0 auto;’ to cen­tre align it. Let’s also give ‘.card’ a white back­ground, 10px of padding and mar­gin and fi­nally a min-height of 300px – this should give us enough to make the page scrol­lable. Lastly we’ll sprin­kle some flexbox magic on the ‘.feed’ to make the items flow nicely with two cards per row.

.feed {

dis­play: flex;

flex-wrap: wrap; }

.feed li {

flex: 1 0 50%; }

3. dis­play: con­tents to the res­cue

If you scroll down the list you’ll no­tice that our cards in the nested list, Card A - C, are caus­ing some lay­out prob­lems. Ideally we’d like them to flow in with the rest of the cards but they are all stuck to­gether in one block. The rea­son for this is that a flex con­tainer – which is cre­ated us­ing ‘dis­play: flex’ – only makes its im­me­di­ate chil­dren, ie the list-items, into flex items.

Now, nor­mally the only way of fix­ing this is to change the markup, but let’s pre­tend that you don’t have that lux­ury. Per­haps the news­feed markup is gen­er­ated by a third-party script or it’s legacy code that you’re only try­ing to re­skin. So how can we fix this?

Meet ‘dis­play: con­tents’. This lit­tle one-liner es­sen­tially makes an el­e­ment be­have as if it isn’t there. You still see the de­scen­dants of the el­e­ment but the el­e­ment it­self doesn’t af­fect the lay­out.

Be­cause we’re pre­tend­ing we can’t change the markup (just for this step) we can be a bit smart about this and make the ‘.card’ el­e­ments the flex items and al­most en­tirely ig­nore the list markup.

First re­move the ex­ist­ing ‘.feed li’ class and then use ‘dis­play: con­tents’ for both ‘<ul>’ and ‘<li>’ el­e­ments:

.feed ul,

.feed li {

dis­play: con­tents;

}

Now you should see the cards flow­ing in or­der, but we’ve lost the siz­ing. Fix that by adding the flex prop­erty to the ‘.card’ in­stead:

.card {

flex: 1 0 40%;

}

Tada! Our cards are now us­ing the won­ders of flexbox as if their struc­tural un­ordered list markup doesn’t ex­ist.

As a side note you might be won­der­ing why the flex-ba­sis value is set to 40%. This is be­cause the ‘.card’ class has a mar­gin, which isn’t in­cluded in the width cal­cu­la­tion as you would ex­pect when us­ing ‘box-siz­ing: bor­der-box’.

As a side note you might be won­der­ing why the flex-ba­sis value is set to 40%. This is be­cause the ‘.card’ class has a mar­gin, which isn’t in­cluded in the width cal­cu­la­tion as you would ex­pect it to when us­ing ‘box-siz­ing: bor­der-box’.

So to work around this we just need to set the flex-ba­sis high enough to trig­ger the wrap­ping at the nec­es­sary point and flexbox will fill the re­main­ing space au­to­mat­i­cally.

4. Per­fect so­lu­tion, right?

Although ‘dis­play: con­tents’ does ex­actly what we need, it is still only at Work­ing Draft sta­tus with W3C. And in Chrome sup­port only ar­rived in ver­sion 65 re­leased March 6th, 2018. In­cred­i­bly Fire­fox has had sup­port since April 6th, 2015!

If you dis­able the style in Dev­tools you’ll see that our changes have made a bit of a mess with the lay­out when ‘dis­play: con­tents’ isn’t ap­plied. So what can we do about this? Time for our next new fea­ture – fea­ture queries. They work just like me­dia queries but they al­low you to ask the browser – us­ing CSS alone – if a prop­erty and value ex­pres­sion is sup­ported. If they are the styles con­tained in­side the query will be ap­plied.

Now, let’s move our ‘dis­play: con­tents’ styles into a fea­ture query.

@sup­ports (dis­play: con­tents) {

.feed ul,

.feed li {

dis­play: con­tents; }

.card {

flex: 1 0 40%; } }

5. Us­ing ‘not’ for a cleaner out­come

Nor­mally in this kind of pro­gres­sive en­hance­ment sce­nario we’d use the query to add the new styles, but it would also have to dis­able some of the orig­i­nal styles nec­es­sary for the fall­back lay­out.

How­ever you might de­cide that be­cause sup­port for fea­ture queries is pretty good (if you ig­nore IE) you ac­tu­ally want to use the fea­ture query ‘not’ op­er­a­tor.

It works just like you’d ex­pect, so we can re-ap­ply our orig­i­nal flex prop­erty to the list-items when ‘dis­play: con­tents’ is not sup­ported:

@sup­ports not (dis­play: con­tents) {

.feed li {

flex: 1 0 50%; }

}

In­side the ‘not’ query we can add some styles so that the ‘.nested’ items ba­si­cally re-ap­ply what was be­ing in­her­ited by us­ing ‘dis­play: con­tents’. feed li.nested { flex-ba­sis: 100%;

}

.feed li.nested ul { dis­play: flex; flex-wrap: wrap; }

6. Tak­ing it one step fur­ther

You can al­ready see the po­ten­tial of fea­ture queries, but the re­ally cool thing is that you can com­bine ex­pres­sions us­ing the three avail­able op­er­a­tors: ‘and’, ‘or’ and ‘not’. Per­haps we could also check for dis­play: flex sup­port and then add a float-based fall­back. We’re not go­ing to do that here, but if we were we’d first mod­ify the two fea­ture queries like so:

@sup­ports (dis­play: flex) and (dis­play: con­tents) {

...

}

@sup­ports (dis­play: flex) and (not (dis­play:

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.