Блог Андрія Огороднікова Хто з мечем до нас прийде, від меча й загине.

Firefox и max-width: 100%

17.04.2017, 21:23

Потихоньку начинаю плохо терпеть мозиловские браузеры.

Начнем с того, что такая полезная штука как «нативные» спойлеры посредством тега <details> с заголовком <summary> в Фоксах не работают. A Хромах — отлично. И приходится искать иные решения вплоть до джава-скриптов. Что не всегда идет на пользу.

Спойлер не для всех

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium vestibulum turpis vel vestibulum. Nulla id lacus dictum, suscipit odio quis, maximus elit. Nullam congue nisl felis, vitae pretium tortor ullamcorper eu. Ut ullamcorper nibh ornare ultrices laoreet. In faucibus arcu vitae elementum ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et gravida mauris. Sed in dui viverra, convallis mi at, viverra ipsum.

Suspendisse facilisis non enim quis ultrices. Quisque sed imperdiet libero. Vivamus et neque tristique, lacinia magna at, condimentum dolor. Aenean luctus ullamcorper arcu, eu convallis lacus mattis vitae. Nunc venenatis arcu quis lorem ullamcorper, sed lacinia nunc cursus. Nam lacus massa, posuere sed sodales in, ultricies a arcu. Curabitur eget libero imperdiet, rhoncus velit quis, vulputate dui. Etiam at condimentum odio, id convallis libero. Ut non rhoncus risus.

А тут, полируя пастой ГОИ сайтик, обратил внимание на жуткую вещь: мозиллы не поддерживают свойство {max-width: 100%}!

Чтобы был понятен принцип. Вот берем картинку, большую-большую. Вставляем как есть, но в CSS свойствах прописываем style="max-width:100%"

И она, как по волшебству, втискивается в нужные пределы..

CqqTiTSWcAAbx7H

Это очень удобно и очень актуально на сегодняшний день, когда у пользователей существует разброс в разрешении экранов — от гигантских настольных до телефонных.

Идея в том, что картинка, или любой другой элемент, масштабируется по размеру окна. Пропорционально. С высотой тоже все в порядке.. Если сайт фиксированной ширины, как данный, то есть — размеры жестко заданы и не меняются, картинка масштабируется прекрасно. Но если дизайн резиновый, то есть размеры элементов задаются в процентах от окна или энного размера контейнера, в пределах которого все может сжиматься ли расширяться… Тихий ужас.

Я, наивно сидя и правя все в Хроме, пребывал в благостном неведении, пока вдруг случайно не открыл страницу в ФФ, потом Симанке, потом в ФФ Найтли… Меня прошиб холодный пот. Картинки, если и масштабировались, то лишь слегка, лишние красоты вылетали за пределы контейнера и жестоко обрезались {overflow:hidden}. Чего я только не пробовал. Уже маячили какие-то скрипты, пока я не сунул после max-width просто width: 100%…

.post img{
max-width: 100%; 
width: 100%; 
height: auto; 
margin: 0; 
background: none; 
display: block;}

И все завертелось в безграничных рамках.

Я эту загадку не берусь объяснить. Здравого смысла в этом нет, чистое колдунство. Не спугнуть бы…

P.S. Еще гвоздь. При переключении между виртуальным сервером и реальным интернетом Хромы мгновенно реагируют, Фоксы нужно перезагружать или очень долго ждать, пока дойдет понимание, что.. залупывания на локалхост больше нет, или оно уже началось.

Что печально, мы наблюдаем альтернативу без альтернативы: несмотря на то, что на рынке существует миллион браузеров с разными названиями, они суть одно — Хром. А Файрфокс разрабами планомерно и плодотворно губится. Что великолепно сказывается на проценте пользователей, неуклонно падающем. Через пару лет… Впрочем, всем по бубну.