Про border-style: dotted
По интернету уже довольно давно ходит картинка, показывающая как разные браузеры обрабатывают толстые границы с точками. С тех пор ничего не изменилось. Но, как выяснилось, чтобы поймать баги, достаточно границы в один пиксель! Во время создания сайта у меня был код, похожий на этот:
<!DOCTYPE html>
<html><head><title>Test page</title>
<style>
hr {
border: 0;
width: 20px;
height: 1px;
border-bottom: 1px black dotted;
display: inline-block;
}
div.test {
width: 10px;
height: 10px;
border-left: 1px black dotted;
border-bottom: 1px black dotted;
}
</style>
</head><body><hr><div class="test"></div></body></html>
Посмотрим, как ведут себя браузеры (изображения я увеличил):
Firefox и IE отрисовывают всё как надо. А вот с остальными дела обстоят хуже:
Chrome добавляет лишнюю точку к прямой линии. Если поиграться с размерами «уголка», то двойные точки будут и там. Поразительно, браузер может запускать трёхмерные игры, но не может нормально нарисовать линию с точками. Аналогично и в Safari — видимо, баг в движке Webkit. Возникает только если размер элемента в пикселях — чётное число. Для исправления предлагается добавить к элементу лишние отступы или границы, но это бесполезно, если размеры непостоянные.
У «Оперы» же расстояние между точками совершенно не такое, как у остальных. Вообще, в стандарте это не оговорено, но другие браузеры всё же стремятся к тому, чтобы там был один пиксель. В «уголке» расстояние и вовсе огромное. Двойная точка тоже присутствует, но связи с чётностью расстояния я не выявил.
Самое простое решение — вообще отказаться встроенного свойства и использовать фоновые изображения. Чтобы лишний раз не дёргать сервер, картинки можно закодировать в Base64 и поместить прямо в CSS. Таблица стилей в этом случае выглядит вот так:
hr {
border: 0;
width: 20px;
height: 1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA9JREFUGFdjYGBg+A8EDAAN+wP9OcJBJQAAAABJRU5ErkJggg==);
display: inline-block;
}
div.test {
width: 10px;
height: 10px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAABhJREFUKFNj+I8XMAABlIkNDHfd2Mn//wFkNg//vXu49gAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
}
У такого решения есть недостатки, легко менять размеры «уголка» уже не получится, а линии будут слегка размытые на Retina дисплеях — для них нужно отдельно отдавать изображения с удвоенным разрешением.
Комментарии
its really amazing in favor of me. https://glassiindia.Wordpress.com
<Loved it! https://Www.bridgewaystaffing....ployer/tonybet/
lot of spzm comments? If so how do you stolp it, any plugin or
anything yyou can suggest? I get so much lately it's driving me insane so any assistance is
very much appreciated. https://Nrlplayers.Wordpress.com
Do you have any tips onn how tto get listed in Yahoo News?
I've been trying for a while but I never seem to get there!
Many thanks https://www.04637.com.ua/list/530660
about this, such as you wrote the ebook in it or something.
I believe that you can do with some percent to pressure the message home
a little bit, however otther than that, this is fantastic
blog. An excellent read. I'll definitely be back. https://azurslotgames.bcz.com/...azurslot-games/
Didd yyou make thus website yourself or did you hire someone to do it for you?
Pllz reply as I'm looking to create my own blog and
would likme to find out where u got this from.
many thanks https://groups.Google.com/g/az...m/c/uGip7Z_xu0o
the opposite specialists of this sector do not realize this.
Youu must continue your writing. I'm confident, you have a huge readers' base already! https://sites.Google.com/view/...ed-online-slots
ans also sharing in delicious. And obviously, thank you on your effort! https://Telegra.ph/Discover-Azurslot-09-02
can I say… I procrastinate a lot and don't manage tto get nearly anything done. https://Avcorrealty.com/agent/nereidabaron2/
It sort of feels that you are doing any unique trick. In addition, The
contents are masterwork. you've performed a
wonderful activity on this subject! https://realty-jp.com/author/britneycardone/
aided me out loads. I'm hoping to contribute & aid other
users like its helped me. Good job. https://Aaronguglani.com/autho...colleenchampli/
It's on a totally different subject but it has pretty much
the same page layout and design. Great choice of colors! https://ariaqa.com/employer/eu...o-girls-escort/
I definitely appreciated every part of it and I have you
book-marked to see new stuff in your web site. https://Sunnyvibes.mx/author/randymccue162/
in my view its really amazing in support of me. https://Dominicarealestate767..../eviezox927536/
I'm experiencing some small security problems with my latest site and
I'd like to find something more secure. Do you have any solutions? https://Brokernetwork.in/autho...sophie88748436/
about this issue. I love all the points you made. https://Assigncircle.com/autho.../kathleendarby/
I've joined your feed and sit up for seeking more of your magnificent post.
Additionally, I've shared your web site in my social networks https://craftsmansearch.com/em...er/euro-escort/
web site is providing. https://Nujob.ch/companies/tonybet1/
I certainly enjoyed every little bit of it.
I have you book marked to check out new stuff you post… https://buyrentvilla.com/autho...tabithaa878368/
I'd like to ask if you don't mind. I was curious to find
out how you center yourself and clear your head prior to writing.
I've had difficulty clearing my thoughts in getting my
ideas out there. I do enjoy writing however it just seems like the first 10
to 15 minutes are usually lost simply just trying to figure out how to begin. Any ideas or tips?
Appreciate it! https://pracaeuropa.pl/companies/tonybet/
an established blog. Is it difficult to set up your own blog?
I'm not very techincal but I can figure things out pretty quick.
I'm thinking about making my own but I'm not sure
where to begin. Do you have any tips or suggestions?
Thank you https://realty-jp.com/author/adrianna24j954/
your blog by chance (stumbleupon). I've bookmarked it for
later! https://Avcorrealty.com/agent/...eric29w9917214/