2
Studying the property outline, I realized that it produces the same effect as property border, at least apparently, see:
.span1{
outline: 1px solid blue;
}
.span2{
border: 1px solid blue;
}<span class="span1">outline</span>
<span class="span2">border</span>My question is: what is the difference between the two in question of use, compatibility and internal properties of each?
6
There are some differences between the two, but the main issue is accessibility, as the Outline is to give a feedback visual to the user when the field is focused. And different from the answer of the colleague vc NEVER must take this feedback of your user, and remember, not everyone uses mouse to navigate, so the :hover not for everyone. So just use the :hover to style an edge when passing the mouse is not a very inclusive option. I suggest you read this article http://www.outlinenone.com/
Apart from this there are other particularities of outline. It is not standard and may be different depending on the user-agent different from the browser border it is native and qq field that is focused, as elements of form already come with the outline set in a standard way, and is activated by clicking with the mouse when being accessed with the Tab keyboard. So Safari, Opera, Edge, etc, any of them can handle the outline differently. Opera even a short time had the outline with rounded corners, and the color of the outline in Safari and Chrome were different. These "styles" were defined by user-agent
Speaking of the technical part there are some differences tb, these are the properties of outline
The outline-offset for example does not exist on the edge, and it serves to say how much the "contour" will distance itself from the element, but this value can be positive or negative if you want the outline further into the element. And this leads to another point very important!
The outline is not part of the box-model, ie it does not take up rendering space... It means that even you put your outline with 20px it will not "push" the elements to the side, because it does not take up space on the screen, is the same as with the box-shadow, it does not occupy physical space on the screen. Already the border if you put 20px of border-width or you’ll need to use box-sizing or this borad will push everything around as it will take 20px of space around the element.
See the example below, the red line is the outline, she doesn’t push the div down with the black border. And the red line is 5px away from the element because of the outline-offset
.box {
width: 100px;
height: 100px;
border: 1px solid black;
outline: 20px dashed red;
outline-offset: 5px;
}<div class="box"></div>
<div class="box"></div>Properties of Border
In addition you can treat each side of the edge individually by placing a color for each side or a thickness pada each edge, with outline you can’t do it. Just like you can’t use border-radius or border-image in the outline
.box {
width: 100px;
height: 100px;
border-top: 5px dashed red;
border-bottom: 2px solid pink;
border-left: 4px dotted blue;
border-right: 10px double green;
border-bottom-left-radius: 10px;
border-top-right-radius: 5px;
}<div class="box"></div>Treating Edge with Focus
If you want to customize the :focus of a input for example you are free to do so, because the important thing is the feedback to the user that the field is active. I will just make one remark below regarding SEO, so if you make any changes of this kind on a website it is good to follow the results by Analytics...
You can use the pseudo class :Focus to treat the input that is in focus by replacing the outline. If you want you can even have a :Hover tb as I did in this example. So you have 3 states here, no focus, with Hover and focused.
.x:hover {
border: 2px solid blue;
}
.x:focus {
border: 2px solid red;
}<input type="text" name="" id="" class="x">About SEO
Speaking of SEO, keep in mind that there is no semantics or SEO made with CSS, what exists here is a visual treatment to improve UX, and UX is considered a ranking factor, so if Google considers fields without outline:none as negative point you may be harmed. This is just a hypothesis...
0
Well, Outline works only when the input or field is in focus, and as far as I’m concerned, you can’t change many of its features as much as you can change in Border. The Border, however, is as the name says, an Edge that is around the element even if it is not in focus, where you can style so that it is rounded, square and even other formats with the property of border-radius. Besides, in this situation, it is much better to use and style Border for occasions like :hover,:active and so on. I particularly almost never leave the Outline active in my projects, because if already some Border, the Outline stays on it with a square shape, which ends up leaving the field "ugly".
Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
Pasta!! : D
– Sam
@Sam is is nois
– hugocsl