Ответы пользователя по тегу CSS
  • Что значит эта ошибка?

    @Val_Ery_1
    Все очень просто...
    Заходите на caniuse.com, в поиске вводите box-sizing и смотрите текущую ситуацию с поддержкой данного свойства различными браузерами (включая мобильные).

    Box-sizing на сегодняшний день поддерживается всеми браузерами, за исключением интернет эксплорера версии 6.

    Обратите внимание: у некоторых версий браузеров в прямоугольнике с номером версии присутствует минус в желтом поле. Нажимаете... И видите, что, к примеру, в Firefox версий со 2 по 28 данное свойство поддерживалось, если к его имени добавлялся префикс (-moz)...

    В результате, ваш валидатор ругается на то, что в коде присутствуют устаревшие названия свойств, которые современным браузера не нужны. Валидатор просто информирует вас о том, что прописывание этих свойств НЕ нужно. И это прописывание может существенно увеличить вес самого css файла.
    Ответ написан
    Комментировать
  • На какие файлы Вы делите less/sass?

    @Val_Ery_1
    Я делаю так:
    главный app.scss и файл настроек settings.scss (здесь глобальные переменные, типа размер шрифта, цветовая схема etc.) в корне каталога scss;
    здесь же несколько каталогов - vendors (для всевозможных дополнений + reset или normalize), components (миксины, классы...), partials (для страниц типа 404, отдельных страниц или их элементов).

    Структура совсем не обязательная: от проекта к проекту может очень сильно отличаться как количеством файлов/каталогов, так и "разбивкой" на страницы/элементы_страниц. Сейчас, к примеру, делаю сайт на ВП. Там дерево пока выглядит так:
    $ tree
    .
    ├── app.scss
    ├── components
    │   ├── _classes.scss
    │   ├── _components.scss
    │   ├── _mixins.scss
    │   └── _typography.scss
    ├── partials
    │   ├── _404.scss
    │   ├── _global.scss
    │   ├── _index.scss
    │   ├── _partials.scss
    │   ├── _posts.scss
    │   ├── _skip.scss
    │   └── _woo.scss
    ├── _settings.scss
    └── vendors
        ├── _reset.scss
        └── _vendors.scss
    
    3 directories, 15 files

    Это только начало. В дереве есть файл woo.scss: там пока общая "обертка", просто до оформления магазина пока не добрался. Типография вынесена в файл _typography.scss отдельно потому, что там всякие вертикальные ритмы, золотые сечения...
    Как-то так :)
    Ответ написан
    Комментировать
  • Как сделать вырез в border?

    @Val_Ery_1
    Ещё вариант:
    <div class="container"><a href="#">Text</a></div>
    a {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.25rem;
      text-transform: uppercase;
      letter-spacing: 1.5rem;
      text-decoration: none;
      padding: 1.5rem 2.5rem;
      border: 1px solid white;
      border-radius: 4px;
      text-indent: 1.5rem;
      color: white;
      display: block;
      position: relative;
    }
    a::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 1rem;
      height: 1rem;
      transform: translateX(-50%);
      border-top: 1rem solid white;
      border-left: 1rem solid transparent;
      border-right: 1rem solid transparent;
    }
    a::after {
      content: '';
      position: absolute;
      top: -1px;
      left: 50%;
      width: 1rem;
      height: 1rem;
      transform: translateX(-50%);
      border-top: calc(1rem - 1px) solid #2aac65;
      border-left: calc(1rem - 1px) solid transparent;
      border-right: calc(1rem - 1px) solid transparent;
    }

    Codepen
    Ответ написан
    Комментировать