Comments 26
А text-align то за что?)
Возможно, вас интересуют подробности о работе этого свойства. Позвольте мне о них рассказать.
Ребят, я ещё даже статью до конца не дочитал, но это прям из Гоголя:
- позвольте мне позволить вам...
- нет, позвольте вам этого не позволить
Согласен. Не литературный перевод.
Вообще тут на Хабре с переводами плохо дело. Люди часто переводят дословно из-за чего стилистика речи выглядит странно (даже при корректном переводе). Русский айтишник, разговаривая с коллегой, никогда бы не выражался так как «разговаривают» переводчики Хабра.
В данном случае, чтобы фраза
«Работает это так...»
или
«Если вам интересно как это работает, то...»
Это не дословный перевод, но смысл не меняет. А воспринимается проще.
В общем, переводы на Хабре видно за версту даже не глядя на бейджик «Перевод».
Вообще тут на Хабре с переводами плохо дело. Люди часто переводят дословно из-за чего стилистика речи выглядит странно (даже при корректном переводе). Русский айтишник, разговаривая с коллегой, никогда бы не выражался так как «разговаривают» переводчики Хабра.
В данном случае, чтобы фраза
Возможно, вас интересуют подробности о работе этого свойства. Позвольте мне о них рассказать.звучала по-русски, то можно было бы написать просто:
«Работает это так...»
или
«Если вам интересно как это работает, то...»
Это не дословный перевод, но смысл не меняет. А воспринимается проще.
В общем, переводы на Хабре видно за версту даже не глядя на бейджик «Перевод».
нет уж, сударь, позвольте не позволить вам мне не позволять! )
Не дочитал, но поставил минус. Количество воды в разы превышает количество полезной информации.
li::marker {
color: #ccc;
}А толку, если это работает только в трех браузерах по умолчанию?)
Аж на 10-18% устройств будет «магия»!
Я вообще всегда удивляюсь, когда с упоением рассказывают про какие-то CSS-штуки, которые не поддерживаются где-то, даже если это, например, один только IE. Серьезно, кто-то где-то разрабатывает проекты, сознательно используя такие фичи? Можно, конечно, заморочиться с graceful degradation, но для большинства из таких «малоизвестных» фич намного проще потратить пусть в два раза больше строк, но наваять решение, которое будет работать везде и одинаково.
Если только IE, то можно и жертвовать. Тем более такой незначительной вещью, как маркеры списков — дизайн не развалится, если этот маркер потеряет свое оформление.
Сегодня не поддерживаются, а через два года начнут. Лучше заранее узнать и просто следить, не привезли ли поддержку, чем всё время городить костыли, потому что вовремя не узнал, что можно делать иначе.
Представляю, как бы я продолжал делать скруглённые уголки картинками, если бы не узнал про border-radius.
Представляю, как бы я продолжал делать скруглённые уголки картинками, если бы не узнал про border-radius.
Вообще не понимаю смысл существование данного псевдоэлемента, когда можно просто сделать:
ul {
color: #ccc;
}
li {
color: #000;
}
А в каких браузерах оно покрасит маркер серым?
Во всех, по крайней мере я за свои 10 лет работы, не встречал браузера который бы не красил маркер, хотя если честно редко когда вообще что то подобное нужно.
P.S. свойство «color» меняет цвет всех фронтовых элементов, а это — текст / border / outline / shadow (text / box) / декарационные элементы / маркеры
P.S. свойство «color» меняет цвет всех фронтовых элементов, а это — текст / border / outline / shadow (text / box) / декарационные элементы / маркеры
Написал пару замечаний, но, видимо, глюки с кэшированием были, поправилось.
Не понимаю, как может существовать текст об трюках в CSS, без указания совместимости и применимости по браузерам. Как бы это же первая вещь, о которой думаешь, когда пишешь любой CSS и уж тем более, когда берешь какое-то «новое» свойство.
Не понимаю, как может существовать текст об трюках в CSS, без указания совместимости и применимости по браузерам.
https://caniuse.com вам на что? Тем более если это первая вещь о которой думаешь ?
За object-fit спасибо, всегда делал через background-size (со своими заморочками) и думал что по другому никак.
Но использовать все равно пока не буду (для картинок по крайней мере) пока IE окончательно не вымрет )
caniuse.com вам на что? Тем более если это первая вещь о которой думаешь ?
Я смотрю обычно в других источниках, но не в этом суть. Суть в том, что, если ты готовишь материал по трюкам css, хорошо бы указывать на ограничения применения или с гордостью сообщить, что этот трюк будет работать на всех живых и полуживых браузерах. А без этого в статье дыра и если автор возьмет и дополнит статью данной информацией, все ему скажут большое спасибо. А также будет сразу понятно, насколько этот трюк полезен в условиях жизни читателя этой статьи.
Я смотрю обычно в других источниках, но не в этом суть.
Ну и зря, в этом то и суть )
Ваши источники размазаны по интернету в подобных статьях?
Если я скажу что будет работать ВЕЗДЕ, вы конечно на слово поверите? )
Не раз находил несоответствия поддержки в статье и в caniuse. Хотя и caniuse может ошибаться, но не сильно — например стрелочные функции js (arrow functions) в iOS Safari появились в 10.1, а не в 10 (столкнулся на своем опыте). Но все равно он более авторитетный и точный, чем условный "составитель статей для лайков" )
что этот трюк будет работать на всех живых и полуживых браузерах
Что реально так трудно проверить интересующий трюк в caniuse ?
и если автор возьмет и дополнит статью данной информацией, все ему скажут большое спасибо.
А если он возьмет данные с потолка?
Ну скажут спасибо и будут гордо думать что "поддерживается ВЕЗДЕ" )
Намного практичней и правильней оставить в конце ссылку типа "совместимость можно проверить здесь". Тут согласен.
PS. Ах да, это вообще перевод )
Мало известные и редко используемые они потому, что даром никому не нужны.
Просто в большинстве случаев они как раз несут вред а не пользу, область их применения стремится к 0.
Но обо всём по порядку.
Оно редко используется просто потому, что должно выполнится пара условий, чтобы было целесообразно использовать такой подход, а именно:
В противном случае (как оно обычно и бывает) всё решается банальным:
У flex охват браузеров заметно больше чем у grid, который, к слову, тоже нужно использовать, но только там, где это оправдано. А для одного элемента, очень сильно крайне редко.
Обратите, кстати, внимание на text-align: center, который по вашему мнению редко используется, но о нем ниже.
И .hero-wrapper вообще не нужен. Я считаю, лучше написать больше стилей, но при этом сделать разметку более компактной и читаемой. Такое чувство, что народ забыл слово семантика.
А вот использование тега font — ИМХО, это просто чудовищный моветон. Если уж вас не смущает плодить лишние теги, то может хоть это смутит. В своих проектах я не использовал его лет… не знаю… 12, больше? Он, конечно, может встретиться в каких-нибудь «визивигах», но я, если честно, уже сомневаюсь. В целом — мрак.
На мой взгляд, это не просто не редкое или мало известное свойство, это вообще, как говорится, мастхэв! Причем не только margin: auto, но и, например, (что намного чаще используется) margin-right: auto; и margin-left: auto; или margin-top: auto; и margin-bottom: auto; — это позволяет «отодвинуть» блок влево/ вправо (вверх / вниз) от соседних блоков во флексе или поставить равномерно м/у ними. Эдакий float новой волны в эпоху flex-box.
Ну т.е. он малоизвестен и не используется просто потому, что нафиг никому не нужен. Поддержка узким сегментом браузеров как бы сама наложила вето на использование этого правила для стилизации «кружочков», кружочков Карл! А если я для списка укажу следующее правило:
Вы это тоже кружочками назовете? Хотя, судя по «кружочкам» вам, может быть неизвестно что такое list-style-type в частности, и list-style в целом. Хотя вот уж действительно малоизвестные свойства list-style-position и, сейчас внимание, боюсь вас шокировать, list-style-image — которое позволяет указать картинку в качестве маркера. Но, к сожалению, они тоже даром никому не нужны и давно почили в бозе.
Я прям даже не знаю… ну, т.е. это свойство полезно в таком количестве мест, что даже закрадываются сомнения — а не шутка ли это автора? Хотя бы стили для пользовательского контента, не? Картинки внутри блока, не? Тот же заголовок по-центру, как у вас — самый очевидный способ это text-align. Возможно вы не знаете, но у него есть еще значение justify, а еще в некоторых случаях приходится использовать text-align: start; ну это уже из области rtl.
Просто зачастую обычного flex с головой хватает для решения задачи. Например, если мы опять вернемся к вопросу о семантике, то ваш пример я бы реализовал так:
И да, для .badges в этом случае возможна необходимость использования inline-flex, если он находится в строке с другими элементами, например.
Тут ситуация пожалуй еще хуже чем с text-align, поскольку object-fit настолько простой и мощный инструмент, особенно в связке с object-position, что альтернатива в лице background таковой не является. Особенно, с точки зрения пресловутой семантики, которой я уже всех утомил. Нет ни одного современного проекта где бы я не использовал object-fit, причем по наблюдениям гораздо чаще используется cover, нежели contain, но это дело случая и предпочтений дизайнера.
Извините, но статья пуста(
Или — знают, но забывают использовать эти свойства там, где они способны принести большую пользу.
Просто в большинстве случаев они как раз несут вред а не пользу, область их применения стремится к 0.
Но обо всём по порядку.
Использование свойства place-items с CSS Grid
Оно редко используется просто потому, что должно выполнится пара условий, чтобы было целесообразно использовать такой подход, а именно:
- Стиль для .hero уже должен использовать сетку, причем, очевидно, это должен быть список одинаковых элементов, а не единичный блок
- Дизайн должен «обязать» использовать обертку ".hero-wrapper", например сложным фоном и отступами, хотя, если честно, мне сложно такое сходу представить
В противном случае (как оно обычно и бывает) всё решается банальным:
.hero{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
У flex охват браузеров заметно больше чем у grid, который, к слову, тоже нужно использовать, но только там, где это оправдано. А для одного элемента, очень сильно крайне редко.
Обратите, кстати, внимание на text-align: center, который по вашему мнению редко используется, но о нем ниже.
И .hero-wrapper вообще не нужен. Я считаю, лучше написать больше стилей, но при этом сделать разметку более компактной и читаемой. Такое чувство, что народ забыл слово семантика.
А вот использование тега font — ИМХО, это просто чудовищный моветон. Если уж вас не смущает плодить лишние теги, то может хоть это смутит. В своих проектах я не использовал его лет… не знаю… 12, больше? Он, конечно, может встретиться в каких-нибудь «визивигах», но я, если честно, уже сомневаюсь. В целом — мрак.
Использование старого доброго свойства margin с CSS Flexbox
На мой взгляд, это не просто не редкое или мало известное свойство, это вообще, как говорится, мастхэв! Причем не только margin: auto, но и, например, (что намного чаще используется) margin-right: auto; и margin-left: auto; или margin-top: auto; и margin-bottom: auto; — это позволяет «отодвинуть» блок влево/ вправо (вверх / вниз) от соседних блоков во флексе или поставить равномерно м/у ними. Эдакий float новой волны в эпоху flex-box.
Стилизация маркеров списка
Псевдоэлемент ::marker поддерживается в Firefox 68+ и в Safari 11.1+. А в Chrome и в Edge 80+ для включения его поддержки нужно активировать соответствующий флаг.
Ну т.е. он малоизвестен и не используется просто потому, что нафиг никому не нужен. Поддержка узким сегментом браузеров как бы сама наложила вето на использование этого правила для стилизации «кружочков», кружочков Карл! А если я для списка укажу следующее правило:
ul{
list-style-type: square;
}
Вы это тоже кружочками назовете? Хотя, судя по «кружочкам» вам, может быть неизвестно что такое list-style-type в частности, и list-style в целом. Хотя вот уж действительно малоизвестные свойства list-style-position и, сейчас внимание, боюсь вас шокировать, list-style-image — которое позволяет указать картинку в качестве маркера. Но, к сожалению, они тоже даром никому не нужны и давно почили в бозе.
Свойство text-align
Я прям даже не знаю… ну, т.е. это свойство полезно в таком количестве мест, что даже закрадываются сомнения — а не шутка ли это автора? Хотя бы стили для пользовательского контента, не? Картинки внутри блока, не? Тот же заголовок по-центру, как у вас — самый очевидный способ это text-align. Возможно вы не знаете, но у него есть еще значение justify, а еще в некоторых случаях приходится использовать text-align: start; ну это уже из области rtl.
Значение inline-flex свойства display
Просто зачастую обычного flex с головой хватает для решения задачи. Например, если мы опять вернемся к вопросу о семантике, то ваш пример я бы реализовал так:
<ul class="badges">
<li class="badge"><svg></svg></li>
<li class="badge"><svg></svg></li>
<li class="badge"><svg></svg></li>
<li class="badge"><svg></svg></li>
</ul>
.badges{
display: flex;
flex-wrap: wrap;
}
.badges .badge{
display: flex;
justify-content: center;
align-items: center;
}
И да, для .badges в этом случае возможна необходимость использования inline-flex, если он находится в строке с другими элементами, например.
Свойство object-fit
Тут ситуация пожалуй еще хуже чем с text-align, поскольку object-fit настолько простой и мощный инструмент, особенно в связке с object-position, что альтернатива в лице background таковой не является. Особенно, с точки зрения пресловутой семантики, которой я уже всех утомил. Нет ни одного современного проекта где бы я не использовал object-fit, причем по наблюдениям гораздо чаще используется cover, нежели contain, но это дело случая и предпочтений дизайнера.
Извините, но статья пуста(
И какие преимущества у object-fit? Ну кроме семантики? Что не покрывает бекграунд?
Семантика и сама по себе важная штука, однако из нее вытекают, возможно, не очевидные последствия. Например, для людей, с ограниченными возможностями, которые используют программы чтения с экрана, изображения в фоне будут не доступны, отсутствует возможность использовать атрибут alt. Точно также при печати страницы фоновые картинки чаще всего игнорируются. Кроме того, может пострадать оптимизация загрузки — если картинка прописана в стилях, то и загружаться она будет после того как браузер ее там найдет. Бывает и такое, что изображения важны для поисковой выдачи, с фоновыми картинками непременно возникнет проблема у роботов. Кроме того, при адаптации страницы под разные разрешения, может возникнуть необходимость избавиться от соблюдения пропорций, в этом случае контейнеру картинки можно не задавать размеров ( допустим height: auto;, ну или padding обнулить, смотря какой метод был использован), а картинка будет видна вся, при любых пропорциях (width: 100%; height: auto; например), а как быть с фоном? Еще можно вспомнить srcset, который не использовать для фоновых картинок, что бывает довольно важно, а поддержка image-set пока, на мой взгляд, еще недостаточна. Да и мало ли чего еще можно вспомнить?
Конечно, если изображения носят чисто декоративный характер, background, возможно, решит задачу, но зачем, если существует специальный инструмент?
Конечно, если изображения носят чисто декоративный характер, background, возможно, решит задачу, но зачем, если существует специальный инструмент?
, с ограниченными возможностями
скажем честно, для РФ, для любой коммерции — это не аргумент ни разу. Для вики, а тем более гос. сервисом — обязанность. Я бы даже запретил вес страниц больше 100кб для гос. сектора. Однако? все равно спорно — никаким альтом картинку не опишешь слепому, а «фотография объекта» толку не даст. Да и пихают сейчас картинки ради приятности глазу а то «текста многа сухавата все»
Печать… да под нее надо пилить все отдельно. Блоки прятать, менюшки, стили переписывать, делать контрастные. Картинками там не отделаешься, тем более галочка есть «печатать фоновые рисунки»
Поисковая выдача — кому как, для выдачи сейчас rss -ку генерят новостные сайты, поисковики не парсят сайты для показа карточек давно для таких быстрообновляемых ресурсов.
Соблюдение отсутсвие пропорций… это бывает нужно иногда, когда фон абстрактный. Но и с бекграундом тоже можно background-size: 100% 100%
srcset штука хорошая. background-image: image-set() призван помочь, но пока еще слишком свеж caniuse.com/?search=image-set()
но зачем, если существует специальный инструмент?
Лишние ноды не всегда приятны. Не всегда хочется переусложнить карточки. Вроде пишешь css так и хочется в ней оставаться, не городить новых нод. Например, статусы «хит продаж» или «новинка» хочется описать просто модифицирующим стилем, а не добавлять новые ноды с необходимыми изображениями. Вот ::before ::after пара штук есть, в тот раз пронесло)) На третий статус уже надо все переделывать.
Sign up to leave a comment.
Малоизвестные CSS-свойства