css empty

I made a terrible mistake when I tweeted about :empty and :blank a while ago. I said that :empty wasn’t useful, and :blank is much more useful than :empty.

不久前我在Twitter上發(fā)布:empty和:blank時(shí)，我犯了一個(gè)嚴(yán)重的錯(cuò)誤。 我說過:empty沒用，而:blank比:empty有用得多。

I was wrong!

我錯(cuò)了！

:empty is actually good enough. We don’t even need :blank!

:empty實(shí)際上足夠好。 我們甚至不需要:blank ！

快速介紹 (A quick introduction)

Okay, first off, what is :empty and what is :blank?

好吧，首先，什么是:empty ？什么是:blank ？

:empty is a pseudo selector. It lets you select elements that are empty.

:empty是偽選擇器。 它使您可以選擇空元素。

/* This is CSS */:empty { /* do something */}

Empty elements are elements that have nothing in them. It cannot even have a whitespace.

空元素是其中沒有任何元素的元素。 它甚至不能有空格。

<!-- This is html --><!-- Example of an empty element --><div></div>

Empty elements can have comments though, as long as the comments fill up the entire element.

但是，空元素可以有注釋，只要注釋填滿了整個(gè)元素。

<!-- This is html --><!-- Empty elements can have comments --><div><!-- this is a comment --></div>

:blank is a powered-up form of :empty. It lets you select elements that have whitespaces in them:

:blank是:empty的加電形式。 它使您可以選擇其中包含空格的元素：

<!-- This is html --><!-- Matched with :blank but not with :empty --><div> </div>

Both :empty and :blank are useful if need to:

如果需要:empty和:blank都是有用的：

Style an empty element

設(shè)置空元素的樣式

Create empty states

創(chuàng)建空狀態(tài)

一個(gè)例子 (An example)

Let’s say you have a <div>. You will only fill up this <div> with content when an error occurs.

假設(shè)您有一個(gè)<d iv>。 僅在發(fā)生錯(cuò)誤時(shí)用內(nèi)容填充this <div>。

<!-- This is html --><!-- Without errors --><div class="error"></div><!-- With errors --><div class="error">Whoops! Something went wrong!</div>

Here, you need to style the .error div. If you don’t use :empty, you need to rely on a class or attribute. This feels redundant.

在這里，您需要設(shè)置.error div的樣式。 如果不使用:empty ，則需要依賴一個(gè)類或?qū)傩浴?感覺很多余。

<!-- This is html --><!-- With errors --><div class="error" data-state="error">Whoops! Something went wrong!</div>/* This is CSS */.error { display: none; background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}.error[data-state="error"] { display: block;}

But if you use :empty, you don’t need the extra class or attribute. You can style the .error class directly. You don’t even need display: none;!

但是，如果使用:empty ，則不需要額外的類或?qū)傩浴?您可以直接設(shè)置.error類的樣式。 您甚至不需要display: none; ！

/* This is CSS */.error { background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}.error:empty { padding: 0;}

Here’s a codepen Empty Demo I made for you to play with (try removing the padding: 0; from .error:empty, you’ll see a red background ?).

這是我為您制作的一個(gè)CodepenEmpty Demo (嘗試刪除padding: 0;從.error:empty刪除，您會(huì)看到紅色背景嗎？)。

Let’s say you want to create a todo-list. When your users see the todo-list for the first time, they will probably see zero todo items.

假設(shè)您要?jiǎng)?chuàng)建一個(gè)待辦事項(xiàng)列表。 當(dāng)您的用戶第一次看到待辦事項(xiàng)列表時(shí)，他們可能會(huì)看到零個(gè)待辦事項(xiàng)。

What do you show when there are zero todos?

當(dāng)待辦事項(xiàng)為零時(shí)，您會(huì)看到什么？

This zero todo state is what we call an empty state.

零待辦狀態(tài)就是所謂的空狀態(tài)。

If you want to create an empty state for your todo-list, you can add an extra <div> after your <ul>. When you do so, you can use a combination of :empty and the + (adjacent sibling) or ~ (subsequent sibling) selector to style the empty state.

如果你想為你的待辦事項(xiàng)列表為空狀態(tài)，你可以添加一個(gè)額外的<d靜脈>之后you [R <ul>。 當(dāng)你這樣做，你可以使用一個(gè)COM binati EM：關(guān)于p TY和+(相鄰s ibling)或?(后續(xù)的兄弟姐妹)選擇款式空狀態(tài)。

<!-- This is html --><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>/* This is CSS */.empty-state { display: none;}ul:empty + .empty-state { display: block;}

I learned how to use :empty this way from Heydon Pickering. Check out Heydon’s article on Inclusive Components if you want to see the todo-list example at work.

我從Heydon Pickering學(xué)習(xí)了如何使用:empty 。 如果您想查看工作中的待辦事項(xiàng)列表示例，請(qǐng)查看Heydon關(guān)于“ 包含組件” 的文章 。

Note: empty states are important. If you need some convincing, check out this article on Invision.

注意：空狀態(tài)很重要。 如果您需要說服力，請(qǐng)查看有關(guān)Invision的文章 。

分解我的推理 (Taking apart my reasoning)

:empty is often enough in practice. I felt :empty isn’t good enough because of two reasons:

實(shí)際上， :empty通常就足夠了。 我覺得:empty不夠好有兩個(gè)原因：

Poor developer experience

糟糕的開發(fā)人員經(jīng)驗(yàn)

I’ll need to trim whitespaces manually with JavaScript

我需要使用JavaScript手動(dòng)修剪空格

The first reason is valid, but it isn’t a big deal.

第一個(gè)原因是有效的，但這并不重要。

The second reason is not valid. I assumed I had to trim whitespaces, but I don’t need to.

第二個(gè)原因無效 。 我以為我必須修剪空白，但是我不需要。

I’ll walk you through both of them.

我將帶您瀏覽他們兩個(gè)。

Let’s go back to the todo-list example. Say we created a todo-list and we have this markup.

讓我們回到待辦事項(xiàng)列表示例。 假設(shè)我們創(chuàng)建了一個(gè)待辦事項(xiàng)清單，并且有了這個(gè)標(biāo)記。

<!-- This is html --><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>

How would you check if :empty was working?

您將如何檢查:empty是否正常工作？

Well, I would remove each <li> with cmd + x. This command cuts the entire line. When I removed all three <li>, I’ll end up with this markup:

好，我將消除每< LI> wi個(gè)c MD + X。 此命令剪切整行。 當(dāng)我刪除所有thre <li>時(shí)，我將得到以下標(biāo)記：

<!-- This is html --><ul></ul>

By now, you’ll know that the HTML above won’t trigger :empty. :empty only works when there are no whitespaces in the element.

現(xiàn)在，您將知道上面HTML不會(huì)觸發(fā):empty 。 :empty僅在元素中沒有空格時(shí)才有效。

I had to remove the whitespaces for :empty to work, which means a few more keystrokes. This was a chore I hoped I didn’t have to go through.

我必須刪除:empty的空白，這意味著需要更多擊鍵。 我希望我不必經(jīng)歷那件事。

But then again, it’s a small problem for a big benefit.

但是話又說回來，這是一個(gè)小問題，卻帶來了很大的好處。

I say it again. You don’t need to trim whitespaces manually in JavaScript if you use :empty. I made a wrong assumption.

我再說一遍。 如果使用:empty則無需在JavaScript中手動(dòng)修剪空格 。 我做錯(cuò)了一個(gè)假設(shè)。

Let’s go through an example and you’ll see what I mean. We’ll use the todo-list example one more time.

讓我們看一個(gè)例子，您會(huì)明白我的意思。 我們將再使用一次todo-list示例。

Say we have this HTML right now:

假設(shè)我們現(xiàn)在有以下HTML：

<!-- This is html --><ul> <li>Item 1</li></ul><div class="empty-state"></div>

For the empty state to work, we need to remove the final <li> item from <ul>. If you use plain JavaScript, you can do this with removeChild.

為了使空狀態(tài)正常工作，我們需要fro <ul>刪除最后一個(gè)< li>項(xiàng)目。 如果您使用純JavaScript，則可以o this with removeChild進(jìn)行此操作。

// This is JavaScriptconst ul = document.querySelector('ul')const li = ul.children[0]ul.removeChild(li)

I believed (erroneously) that removeChild will produce this HTML:

我相信(錯(cuò)誤地) removeChild將產(chǎn)生以下HTML：

<!-- This is html --><ul></ul>

If it produces this HTML, I’ll have to trim any whitespace remaining in the list (which is extra JavaScript).

如果產(chǎn)生此HTML，則必須修剪列表中剩余的所有空白(這是額外JavaScript)。

// This is JavaScriptconst ul = document.querySelector('ul')const li = ul.children[0]ul.removeChild(li)if (ul.children.length === 0) { ul.innerHTML = ''}

Like I said, I was wrong. It didn’t produce the above HTML. Instead, this is what it produced:

就像我說的，我錯(cuò)了。 它沒有產(chǎn)生上述HTML。 相反，這是它產(chǎn)生的：

<!-- This is html --><ul></ul>

Which means we didn’t need the extra JavaScript to trim whitespace!

這意味著我們不需要額外JavaScript來修剪空格！

Disclaimer: I checked the output on Safari, Chrome, and Firefox. I haven’t checked Edge yet though. I’ll be super grateful if you can help me test it out!免責(zé)聲明：我檢查了Safari，Chrome和Firefox的輸出。 我還沒有檢查Edge。 如果您能幫助我進(jìn)行測試，我將不勝感激！

Here’s the code for this example:

這是此示例的代碼：

See the Pen Empty demo with todolist I made (@zellwk) on CodePen.

請(qǐng)參閱我在CodePen上創(chuàng)建的 todolist ( @zellwk )的PenEmp演示 。

:empty is supported on all browsers, and :blank has poor browser support. This gives you plenty of reason to use :empty over :blank today!

:empty在所有瀏覽器上都受支持，而:blank對(duì)瀏覽器的支持不佳。 這給了您充足的理由使用:empty over :blank ！

I hope that browser support for :blank improves one day though.

我希望有一天，瀏覽器對(duì):blank支持會(huì)有所改善。

結(jié)語 (Wrapping up)

:empty and :blank let you style empty elements and produce empty states easily.

:empty和:blank允許您設(shè)置空元素的樣式并輕松產(chǎn)生空狀態(tài)。

:blank is better than :empty because it provides us with a better developer experience. But we can’t use :blank because :blank doesn’t have enough browser support.

:blank比:empty更好，因?yàn)樗鼮槲覀兲峁┝烁玫拈_發(fā)人員體驗(yàn)。 但我們不能使用:blank因?yàn)?blank沒有足夠的瀏覽器支持。

:empty is often good enough. You can use it already. Use it all you want! ?

:empty通常足夠好。 您已經(jīng)可以使用它了。 隨便使用它吧！ ？

Give :empty a go and let me know what you think!

放開:empty走，讓我知道您的想法！

Thanks for reading. Did this article help you in any way? If you did, I hope you consider sharing it. You might help someone out. Thank you!

謝謝閱讀。 本文對(duì)您有任何幫助嗎？ 如果這樣做， 希望您考慮共享它 。 您可能會(huì)幫助某人。 謝謝！

This article was originally posted at my blog.

本文最初發(fā)布在我的博客上 。

Sign up for my newsletter if you want more articles to help you become a better frontend developer.

如果您想獲得更多文章來幫助您成為更好的前端開發(fā)人員，請(qǐng)注冊(cè)我的時(shí)事通訊 。

翻譯自: https://www.freecodecamp.org/news/empty-and-blank-53b9e96151cd/

css empty

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的css empty_何时使用：empty和：blank CSS伪选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。