author :John
translator : The front end little wisdom
source :smashingmagazine
Enjoy it , Develop habitsthis paper
GitHub
https://github.com/qq44924588... I have included , More categories of previous high praise articles , I've also compiled a lot of my documents , And tutorial materials . welcome Star And perfection , You can refer to the interview site review , I hope we have something .
Recently, we open source a Vue Components , It's not perfect , Welcome to improve it together , I hope you can give me a star support , Thank you .
github Address :https://github.com/qq44924588...
Property selectors are amazing . They can help you get rid of tough problems , Help you avoid adding classes , And point out some problems in the code . But don't worry , Although property selectors are very complex and powerful , But they are easy to learn and use . In this paper , We'll talk about how they work , And give some ideas on how to use them .
Will usually HTML
Attribute in square brackets , It's called a property selector , as follows :
[href] {
color: red;
}
So anything with href
The text color of elements with no more specific selectors will be Red
. Property selectors have the same properties as classes .
notes : More about cage matching CSS Specificity , You can read CSS characteristic : What you should know , Or if you like Star Wars :CSS Character Wars .
But you can do more with property selectors . It's like yours DNA equally , They have internal logic to help you choose a variety of attribute combinations and values . They can match any of the attributes , Even string values , Not like labels 、 Class or id Selectors match exactly like that .
Attribute selector
Property selectors can exist independently , More specifically , If you need to choose all with title
Attribute div label , You can do that :
div[title]
But you can also choose to have title
Attribute div Child elements
div [title]
It should be noted that , There is no space between them, which means that the attributes are on the same element ( It's like there's no space between elements and classes ), And the space between them means the descendant selector , That is, select the child element of the element with the attribute .
You can select properties with specific attribute values more finely .
div[title="dna"]
All of the above have exact names dna
Of div, Although there are selector algorithms that can handle every situation ( And more ), But there's no choice here “dna is awesome” or “dnamutation” The title of the .
Be careful : in the majority of cases , No quotation marks are required in the property selector , But I use them , Because I believe it can improve the readability of HD code , And make sure that the boundary use cases work properly .
If you want to choose title contain dna
The elements of , Such as “my beautiful dna” perhaps “mutating dna is fun!” , have access to The waves, (~).
div[title~="dna"]
If you want to match with dna
At the end of the title, Such as “dontblamemeblamemydna” or “his-stupidity-is-from-upbringing-not-dna” , Just ready to use $
identifier :
[title$="dna"]
If you want to match with dna
At the beginning title, Such as “dnamutants” or “dna-splicing-for-all” , Just ready to use ^
identifier :
[title^="dna"]
Although exact matching can help , But it may choose to be too tight , also ^
Symbol matching may be too wide for your needs . for example , Maybe you don't want to choose “genealogy” The title of the , But still choose “gene” and “gene-data”. Pipeline features (|) this is it , Property must be complete and only 's words , Or with -
Separate .
[title|="gene"]
Last , There is also a fuzzy search attribute operator that matches any substring , Attribute to do string splitting , As long as it can be disassembled dna
This word will do :
[title*="dna"]
What makes these property selectors even more powerful is , They are stackable , Allows you to select elements with multiple matching factors .
If you need to find one a
label , It has one title
, And there's one with “genes” At the end of the class, You can use the following methods :
a[title][class$="genes"]
You can not only choose HTML Attribute of element , You can also use pseudo type elements to print out text :
<span class="joke" title="Gene Editing!">What’s the first thing a biotech journalist does after finishing the first draft of an article?</span>
.joke:hover:after {
content: "Answer:" attr(title);
display: block;
}
The above code will display a custom string when hovering over the mouse .
The last thing to know is , You can add a logo , Make property search case insensitive . Add before closing bracket i
:
[title*="DNA" i]
So it matches dna
, DNA
, dnA
etc. .
Now we've seen how to use the property selector to select , Let's look at some use cases . I divide them into two categories : General purpose and The diagnosis .
General purpose
Input type style settings
You can use different styles for input types , E-mail and phone calls .
input[type="email"] {
color: papayawhip;
}
input[type="tel"] {
color: thistle;
}
Show phone links
You can hide specific size phone numbers and show phone links , So that you can easily make a call on your mobile phone .
span.phone {
display: none;
}
a[href^="tel"] {
display: block;
}
internal link vs External links , Secure links vs Unsafe Links
You can differentiate between internal and external links , And set the secure link to be different from the unsafe link :
a[href^="http"]{
color: bisque;
}
a:not([href^="http"]) {
color: darksalmon;
}
a[href^="http://"]:after {
content: url(unlock-icon.svg);
}
a[href^="https://"]:after {
content: url(lock-icon.svg);
}
Download Icon
HTML5 One attribute given to us is “ download ”, It tells the browser , You guessed it , Download the file instead of trying to open it . This is for things that you want people to visit but don't want them to open immediately PDF
and DOC
Very useful . It also makes it easier to download a large number of files in a row . The disadvantage of the download property is that there is no default visual effect to distinguish it from more traditional links . Usually this is what you want , But if not , You can do things like this :
a[download]:after {
content: url(download-arrow.svg);
}
You can also use different icons ( Such as PDF And DOCX And ODF etc. ) To represent the file type , wait .
a[href$="pdf"]:after {
content: url(pdf-icon.svg);
}
a[href$="docx"]:after {
content: url(docx-icon.svg);
}
a[href$="odf"]:after {
content: url(open-office-icon.svg);
}
You can also overlay the property selector to make sure that the icons only appear on downloadable Links .
a[download][href$="pdf"]:after {
content: url(pdf-icon.svg);
}
To cover or reuse abandoned / Abandoned code
We all come across outdated code, old websites , stay HTML5 Before , You may need to override or even reapply styles implemented as attributes .
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div>
div[bgcolor="#000000"] { /*override*/
background-color: #222222 !important;
}
div[color="#FFFFFF"] { /*reapply*/
color: #FFFFFF;
}
Override specific inline styles
Sometimes you come across some inline styles , These styles affect the layout , But we didn't change the styles . So here's one way .
If you want to override the exact properties and values , And it's everywhere it wants to be covered , Then this method works best .
For this example , The margin of the element is set in pixels , But need to be in em
To expand and set , So that the elements can be adjusted correctly when the user changes the default font size .
<div style="color: #222222; margin: 8px; background-color: #EFEFEF;"Teenage Mutant Ninja Myrtle</div>
div[style*="margin: 8px"] {
margin: 1em !important;
}
Show file type
By default , The input file is not visible . Usually , We use pseudo elements to expose them :
<input type="file" accept="pdf,doc,docx">
[accept]:after {
content: "Acceptable file types: " attr(accept);
}
html Accordion menu
details
and summary
Label is a kind of use only HTML Expand / Accordion menu method ,details
It includes summary
What to show when the label and accordion are opened . Click on summary
It will unfold details
Tag and add open
attribute , We can go through open
Properties are easily opened for details
Label setting style :
details[open] {
background-color: hotpink;
}
Print Links
Show in print style URL It took me on the road to understanding property selectors . You should now know how to build it yourself , You just have to choose to carry href
All tags for , Add pseudo elements , And then use attr()
and content
Print them .
a[href]:after {
content: " (" attr(href) ") ";
}
Custom prompt
Using property selectors to create custom tooltips is fun and easy :
[title] {
position: relative;
display: block;
}
[title]:hover:after {
content: attr(title);
color: hotpink;
background-color: slateblue;
display: block;
padding: .225em .35em;
position: absolute;
right: -5px;
bottom: -5px;
}
Easy key
web One of the advantages of is that it provides many different information access options . One rarely used property is to set accesskey
The ability of , So you can use key combinations and accesskey
Set the letters to access the project directly ( The exact key combination depends on the browser ). But it's not easy to know which keys are set on a website
The following code shows these keys :focus
. I don't use the mouse to hover , Because most of the time you need to accesskey
People who have trouble using the mouse . You can add it as a second option , But make sure it's not the only option .
a[accesskey]:focus:after {
content: " AccessKey: " attr(accesskey);
}
The diagnosis
These options are used to help us identify the problem locally during the build process or when trying to fix the problem . Putting this content on our production website can cause users to make mistakes .
No, controls Attribute audio
I don't use it very often audio
label , But when I use it , I often forget to include controls
attribute . result : Nothing is displayed . If you are in the Firefox, If you hide audio elements , Or grammar or some other problem that prevents it from happening ( Only applicable to Firefox), This code can help you solve the problem :
audio:not([controls]) {
width: 100px;
height: 20px;
background-color: chartreuse;
display: block;
}
No, alt
Text
No, alt
Images of text are an accessibility nightmare . It's hard to find them just by looking at the page , But if you add them , They'll pop out ( When the page image fails to load ,alt Text can better explain the role of pictures ):
img:not([alt]) { /* no alt attribute */
outline: 2em solid chartreuse;
}
img[alt=""] { /* alt attribute is blank */
outline: 2em solid cadetblue;
}
asynchronous Javascript file
Web pages can be content management systems and plug-ins , A collection of frameworks and code , Determine what JavaScript Asynchronous loading and what doesn't load can help you focus on improving page performance .
script[src]:not([async]) {
display: block;
width: 100%;
height: 1em;
background-color: red;
}
script:after {
content: attr(src);
}
JavaScript Event elements
You can highlight having JavaScript
The element of the event attribute , In order to refactor them to JavaScript In file . I'm going to focus here OnMouseOver
attribute , But it applies to anything JavaScript Event properties .
[OnMouseOver] {
color: burlywood;
}
[OnMouseOver]:after {
content: "JS: " attr(OnMouseOver);
}
Hidden item
If you need to see the location of hidden elements or hidden inputs , You can use them to show
[hidden], [type="hidden"] {
display: block;
}
original text :https://www.smashingmagazine....
Possible after code deployment BUG There's no way to know in real time , In order to solve these problems afterwards BUG, It took a lot of time log debugging , This way, I'd like to recommend an easy-to-use one for you BUG Monitoring tools Fundebug.
communication
Articles are updated every week , You can search by wechat 「 The big move the world 」 First time reading and urging ( One or two articles earlier than blog ), this paper GitHub https://github.com/qq449245884/xiaozhi Included , I organized a lot of my documents , welcome Star And perfection , You can refer to the interview site review , Pay attention to official account. , The background to reply welfare , You can see the benefits , You'll see .