ShPB
Junior Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
sendaplanet
почти универсальный css для сайтов с flex, на разбор
Код: /*
* Строка поиска выходит за границы родителя формы flex, если родитель display:none(habr) или display:flex(жж)
* habr.com, livejournal.com, msfn.org
* Ломает: aliexpress.com - flex нет (ломает поиск)
* flickriver.com - flex нет
* tbmmarket.ru - flex нет
* Обрезает тени: tbmmarket.ru
*/
form {
overflow: hidden
}
/*
* элемент(div, img) выходит за границы родителя flex
* min-width - habr.com, caniuse.com, hexlet.io, lenincrew.com
* min-height - meduza.io
* Ломает: aliexpress.com - flex нет (ломает ширину страницы)
* coub.com - flex есть
*/
div, header, footer, nav, aside, section, article, hgroup, main,
p, /*span,*/ button, a {
min-width: 0px; /* не должно перекрывать "min-width: auto" и т.п. без !important, но перекрывает - опять баг */
/* ломает там где есть flex-basis, надо проверять через js или сделать auto */
/* ТЕСТ flex-basis: auto !important; провален на kakpozvonit.ru */
min-height: 0px; /* исправляет бесконечную прокрутку на meduza.io */
}
img {
min-width: 0px;
}
-a > img[height] {
-height: auto !important; /* habr */
max-height: 100%; /* для github */ /* ломает альбомы */ /* ломает фото карты справа на google.ru */
/* min-height: 0px; не работает */
outline: 1px solid purple;
}
img[width="15"][height="15"] { max-width: 15px !important; max-height: 15px !important}
img[width="16"][height="16"] { max-width: 16px !important; max-height: 16px !important} /* habr */
img[width="20"][height="20"] { max-width: 20px !important; max-height: 20px !important} /* github */
img[width="21"][height="21"] { max-width: 21px !important; max-height: 21px !important}
img[width="22"][height="22"] { max-width: 22px !important; max-height: 22px !important}
img[width="23"][height="23"] { max-width: 23px !important; max-height: 23px !important}
img[width="24"][height="24"] { max-width: 24px !important; max-height: 24px !important} /* habr */
img[width="25"][height="25"] { max-width: 25px !important; max-height: 25px !important}
img[width="30"][height="30"] { max-width: 30px !important; max-height: 30px !important}
img[width="35"][height="35"] { max-width: 35px !important; max-height: 35px !important} |
2) реальная высота элемента, больше "рассчитанной" (вроде clientHeight > height)
css stackoverflow.com
Код: /* главная страница - width: calc(100% - 300px - 24px) = 728px */
#mainbar, .mainbar {
width: 727px !important;
}
/* div c вопросом - в css width:calc(100% - 70px - 16px - 2px); */
.post-layout--right {
width: 640px !important;
}
/* ширина имён и данных пользователей */
/* в css ужимаeтся .user-details путём вычетания ширины аватарки
.user-info .user-gravatar32 + .user-details {margin-left:8px; width:calc(100% - 40px)}
.user-info .user-gravatar48 + .user-details {margin-left:8px; width:calc(100% - 48px)}
.user-info .user-gravatar64 + .user-details {margin-left:8px; width:calc(100% - 64px)}
*/
.user-info .user-details {
width: auto !important;
} |
|
