Задать вопрос
Ответы пользователя по тегу CSS
  • Как делать отступы по макету?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Это по какой-то системе делается или дизайнер просто так по красоте на глазок подбирает отступы?

    Эта система в народе называется стайлгайд. В долгоживущих проектах иметь его в оформленном виде очень полезно. В нем есть и все размеры, и все цвета, и шрифты, а часто и компоненты по отдельности. Если у вас есть стайлгайд - то вы работаете по нему, макет страницы - это скорее для понимания "что в какое место поставить". Он может быть кривым/косым, хоть на бумажке нарисованным.

    Надо ли именно такие отступы соблюдать или можно, например, просто в бутстраповский контейнер запихнуть секцию и не париться?

    А вот если у вас нет стайлгайда и при этом кривой макет, то стоит спросить дизайнера/заказчика об этом и действовать исходя из их объяснений. Единственное, что стоит серьезно обсуждать - так это ситуацию, когда заказчик хочет pixel-perfect, до дизайнера уже не достучаться, а весь макет кривой настолько, что аж в глазах рябит. Там нужно или увеличивать сроки и цену или убеждать, что плюс-минус пара пикселей не имеют великого смысла и вы выиграете и по срокам и в перспективе при поддержке всего этого.
    Ответ написан
    Комментировать
  • Какую библиотеку для анимации вы используете постоянно?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На постоянной основе - anime.js или делаю анимации на CSS, иногда использую D3.js.
    Ответ написан
    Комментировать
  • Есть ли какие-то преимущества в разделении кода для одного селектора на части?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если вопрос о компонентах - то скорее всего особой пользы от такого не будет. Если о каких-то глобальных вещах (даже вы сразу приводите пример с html) - может иметь смысл деление глобальных стилей на смысловые части: стандартная нормализация (например normalize.css), дополнительная нормализация (например дать всему box-sizing: border-box), все, что связано с текстами (размеры, шрифты), хаки и куски полифилов, которые со временем было бы хорошо убрать и.т.д. В случае крупного проекта вы можете думать не селекторами, а смысловыми группами - это не обязательно, но довольно удобно.

    Ну и, разумеется, есть вариант "10 фрилансеров, каждый что-то добавил, получилось чудовище франкенштейна - куча швов и заплаток, но вроде работает". Там никакого смысла не будет, просто "так получилось".
    Ответ написан
    1 комментарий
  • С какими проблемами сталкиваетесь при flexbox верстке и как их решаете?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Cобственно проблемы описаны тут. Решения там тоже описаны. Также проблемы решаются ограничением использования флексбоксов (дабы не мучать свой мозг и не тестировать каждый чих во всех браузерах). Ну и postcss-flexbugs-fixes в составе postcss-fixes тоже лишним не будет.
    Ответ написан
    Комментировать
  • Есть реально адаптивные/responsive - вплоть до 4k (широкие экраны) шаблоны?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Возможно я чего-то не понимаю в реальной вёрстке, раз такой подход хвалёной адаптивности - подгонки сайта ко всему - от умных часов до UltraHD-телевизоров - на практике слабо встречается.

    Это бизнес. Ничего личного. Условно, если у сайта менее 0.5% пользователей сидит с телевизоров или с часов, то дешевле положить на них болт, чем адаптировать. Серьезные компании могут заплатить UI дизайнеру, UX дизайнеру (а то и целой команде), верстальщику, купить им несколько телевизоров, умные часы, провести несколько юзабилити-тестирований, потратить на все это кучу денег. А компаниям с небольшим отделом разработки это выльется в годовой бюджет этого отдела и никак не окупится.
    Ответ написан
    Комментировать
  • Оцените верстку?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Что нужно поправить?

    Доступность. В частности вопросы контрастности элементов. Если вам дизайнер дает такую бяку - вы просто обязаны его поправить. В частности состояния элементов:
    3ff17e1ab4c746688fe4bd419db67e62.pngc9145b0046004608bf1cdeef99826c45.png
    Вы видите разницу? А она есть. Мы с вами может и заметим ее, но пользователь - нет.

    С фокусом вообще все печально, нормально протабать страницу нельзя - фокус улетает в неизвестном направлении и пол страницы пребывает где-то там. Ну и синенькие рамочки - не комильфо.
    Ответ написан
  • Как исправить кучу ошибок цсс в валидаторе?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как исправить кучу ошибок цсс в валидаторе?


    Тут вопрос не в том, как исправить, а в том, что исправить. Префиксы, как вы понимаете, нам нужны в любом случае. Меняем настройки валидации, чтобы не обращать на них внимание:
    9d365b5f13ea4505a0f5ffbb674078a3.png

    Имеем 9 ошибок с вашего сайта. Из них (с повторениями, -webkit-min-device... не считаем):
    - Property user-select doesn't exist : none - это свойство из черновика CSS4. Все ок.
    - Property touch-action doesn't exist : pan-y - относится к спецификации Pointer Events, а не CSS. Все ок.
    - Value Error : cursor hand is not a cursor value : hand - вот тут ошибочка, cursor: hand не бывает.
    - Value Error : margin-top Unknown dimension 10px\9 - что-то тут не так со значением отступа.

    Последние две ошибки стоит поправить, на остальное можно забить.
    Ответ написан
    1 комментарий
  • Как применить стиль к прямым потомкам?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как сделать чтобы слова "Первый" и "Второй" были красным цветом, но при этом Потомок 1 и Потомок 2 оставались черным.

    Можно сделать по-простому:
    ul {
        color: #f00;
    }
    
    ul ul {
        color: #000;
    }


    Но в перспективе предпочтительнее отойти от использования подобных селекторов и прийти к бэм или какой-нибудь еще методологии.
    Ответ написан
  • Display обнуляет любую анимацию через transition?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Используйте
    visibility: hidden;
    pointer-events: none;

    вместо display: none;
    и
    visibility: visible;
    pointer-events: auto;

    вместо display: block;

    Анимация будет работать так, как вы описали. Pointer-events отключается для того, чтобы скрытый элемент не мешал наведению и кликам по элементам под ним (если он будет абсолютно позиционирован или перемещен и что-то окажется снизу).
    Ответ написан
    Комментировать
  • Как интерпретировать математический код из LESS в SASS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Посмотрите на mathsass - там реализованы все эти функции.
    Ответ написан
    Комментировать
  • Как с помощью css подстроить размер текста под размеры блока?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В общем случае на CSS так сделать нельзя. В некоторых случаях можно привязать размер шрифта к ширине вьюпорта (статейка по теме), но вашу проблему это скорее всего не решит и придется использовать JS.
    Ответ написан
    Комментировать
  • Z-index: over9999 - зачем?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Z-index over9000 не нужен вообще. Это костыль, который некоторые люди, не понимающие css, используют для того, чтобы быть уверенными в том, что их элемент будет "сверху". При этом цивилизованные люди ограничиваются небольшими значениями z-index, с которыми проще работать. Иногда используют логические схемы вроде таких:
    • 0-9 - в пределах компонента
    • 10-19 - для всплывающих менюшек, подсказок и.т.д.
    • 20-25 - для выезжающих меню, модалок и.т.д.

    Можно ограничиться только диапазоном 0-9, но такая схема, хоть и является избыточной, позволяет проще ориентироваться в коде.

    А те, кто говорит "Но если используются сторонние плагины, в которых элементы имеют большой z-index, а их надо перекрыть, то ничего другого не остается" в ответах выше ( mletov ) просто решают один костыль подпереть другим. Не стоит утверждать, что ничего другого не остается - в большинстве случаев предпочтительнее в такой ситуации использовать обертку (пример упрощен для наглядности):

    <div class="my-div">My element</div>
    <div class="wrapper">
        <div class="over9000">over9000</div>
    </div>


    div { position: absolute; width: 100%; }
    
    .my-div   { background: #0f0; z-index: 2; }
    .wrapper  { z-index: 1; }
    .over9000 { background: #f00; z-index: 9999 !important; }


    В такой ситуации "мой элемент" будет выше, чем "over9000".
    codepen
    Ответ написан
    2 комментария
  • Как заставить все элементы станицы наследовать размер шрифта с body а не с непосредственного родителя в единицах em?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как отменить наследование

    1em = размер шрифта родительского элемента
    1rem = размер шрифта корневого ( :root ) элемента, в данном случае - это html

    Вероятно вам необходимо использовать единицы rem.
    Ответ написан
    Комментировать
  • Как ускорить анимацию?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Полагаю, will-change: transform присутствует. Можно еще попробовать на время анимации добавлять к списку pointer-events: none, как в том хаке с плавным скроллом. Если не поможет, то стоит подумать о том, что из большого списка при движении в горизонтальном направлении часть групп не будет видна. Соответственно можно анимировать по отдельности те, которые видны (с небольшой задержкой у каждой следующей - как на ведроиде центр уведомлений очищается), а остальные (скрытые) просто вставлять в нужное место при завершении анимации у первых.
    Ответ написан
    1 комментарий
  • Как сделать такую фигуру?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Just Do It!

    Вообще идея использовать clip-path - это хорошая идея, ноо... если фон у вас и правда белый....
    (размеры взял из головы, не в них смысл)
    .test {
        margin: 100px;
        height: 200px;
        width:  600px;
        transform: perspective(600px) rotateY(45deg);
        border-top-left-radius:    50px 100px;
        border-bottom-left-radius: 50px 100px;
        overflow: hidden;
        background: #000;
    }
    
    .test::after {
        background: #fff;
        content: '';
        display: block;
        height: 120%;
        width: 30%;
        transform: translateX(75%) translateY(-10%);
        float: right;
        border-radius: 50%;
    }


    273d37ed0c98421996e1600752619040.pngCodePen
    Ответ написан
    1 комментарий
  • Как создать подложку на ::before?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Немного поправил ваш код:
    .arrow {
      position: relative;
    }
    
    .arrow::before {
      content: '';
      display: block;
      width:  650px;
      height: 600px;
      background: blue;
    }
    
    .arrow::after {
      content: '';
      display: block;
      position: absolute;
      top:  0;
      left: 0;
      width:  600px;
      height: 400px;
      background: url(http://cliparting.com/wp-content/uploads/2016/05/Arrow-clipart-arrow-graphics-clipartcow-2.png);
    }
    Ответ написан
    Комментировать
  • Как сделать кнопку со с резаными углами?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Иван Карпущенко верно говорит, можно использовать transform:skew, но вот по поводу использования псевдоэлемента для текста - очень спорная мысль, точнее сказать не универсальная. Или придется этот текст передавать через data-атрибут, что будет довольно странным решением. Гораздо практичнее просто в button добавить span с текстом - codepen.
    Ответ написан
    Комментировать
  • Какой порядок обучения веб-верстке вы посоветуете?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

    HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
    CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
    JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
    Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
    Git, NPM: без комментариев

    А дальше, когда вы будете владеть тем, что нужно везде, уже встанет вопрос о ваших задачах. Существуют тысячи библиотек и фреймворков, каждый из которых хорошо решает одни задачи и плохо решает другие. Расширяйте кругозор и выбирайте инструменты исходя из задач.

    Есть еще один дельный совет: читайте ответы на тостере и изучайте решения, которые народ предлагает. Разбирайтесь с тем, как они что-то делают. В перспективе сами отвечайте. Метод утенка рулит.

    Ну и умение задавать вопросы тоже лишним не будет.
    Ответ написан
    Комментировать
  • Как перестроить дерево в Media запросах?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если я вас правильно понял, то SASS тут не при чем. Почитайте про специфичность селекторов в CSS (это легко гуглится). В крайнем случае можно было бы использовать !important в вашей ситуации, но это только в том случае, если вы понимаете то, зачем вы это делаете, и есть какая-то система его использования во всем проекте.

    Но разумнее будет использовать методологии вроде популярного БЭМ или не очень популярного RSCSS. Это будет гораздо лучшим решением по сравнению с попыткой одну бяку закостылить другой.
    Ответ написан
    Комментировать
  • Как сделать угл у блока с разным background через css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно совместить идею использования градиентов на ::before и ::after и старый хак с padding в процентах, чтобы получить универальную конструкцию, которая работает на любой ширине родительского элемента и при любом содержимом: codepen.

    Также можно использовать calc для вычисления переходных точек этих градиентов (если вам нужно сохранять ширину полоски одинаковой при изменении ширины элемента), но нужно помнить про IE, который не очень это умеет, и в таком случае придется подставлять подпорку для него.
    Ответ написан
    Комментировать