Ответы пользователя по тегу Вёрстка
  • Как работают медиазапросы, почему не работает?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    max-width означает "до" (включительно)
    min-width означает "от" (включительно)

    т.е. у вас стили применяются на ширине браузера до 992px включительно
    Начиная с 993 эти стили отключаются.

    max-device-width: 1400px
    означает "размер дисплея до 1400". Дисплея (устройства), не браузера.
    Ответ написан
  • Как вы описываете класс active элемента в Sass?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    .menu {
      position: relative;
    
      &__item {
        display: block;
        margin-bottom: 5px;
        position: relative;
      }
    
      &__link {
        display: block;
        font-size: 1rem;
        color: blue;
      }
    
      &__img {
        position: absolute;
        width: 10px;
        height: 10px;
        display: none;
      }
      
      //==
      //== Hover & active states
      //== ======================================= ==//
      
      &__link:hover,
      &__link_active {
        color: red;
      }
      
      &__link:hover + &__img,
      &__link_active + &__img {
        display block;
      }
    }
    Ответ написан
  • Какие можно задать классы заголовкам, если есть 3 заголовка с разными цветами?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Нужно понять, что означают эти цвета.
    Можно тупо сделать модификаторы, как предложил DanKud:

    <h2 class="heading heading_red">
    ...
    </h2>


    Но это плохо тем, что впоследствии heading_red может стать желтым, или в полоску. И если уж так писать, то лучше использовать param_value модификатор:

    <h2 class="heading heading_theme_red">
    ...
    </h2>


    В общем случае, без оглядки на макет, более правильно будет в названии класса описать его назначение:

    <h2 class="heading heading_primary">...</h2>
    <h2 class="heading heading_secondary">...</h2>
    Ответ написан
  • В каком порядке писать Sass-селекторы?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    .block {
      $this: &;
    
      color: red;
      
      &__element { font-size: 12px; }
    
      &:hover &__element { transform: scale(1.1); }
    
      @media () {}
    
      //==
      //== Модификация какая-то
      //== ==========================
    
      #{$this}_mod {
        color: green;
        &__element { font-size: 16px; }
        @media () {}
      }
      #{$this}__mod:hover &__element { transform: scale(1.1); }
    
      //==
      //== Другая модификация
      //== ==========================
    
      &_mod { background: yellow; }
      @media () {}
    }
    Ответ написан
  • Что более актуально использовать :Grid или flex?

    delphinpro
    @delphinpro
    frontend developer
    Смотрим ссылки
    https://caniuse.com/#feat=flexbox
    https://caniuse.com/#feat=css-grid

    И сами решаем, можно ли конкретно вам на отдельно взятом проекте использовать ту или иную технологию.

    Актуально то, что позволяет вам сделать техническое задание к проекту.
    Ответ написан
  • Как указать фиксировано-адаптивную высоту блока?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Метод, предложенный SmthTo, хорош, когда все слайды одинаковые.
    Если слайды с разным кол-вом высоты и автоподстройкой высоты при смене слайда, он не подойдёт.

    Добавлю еще один, который использую я.

    Он примитивен: просто прописываем высоту обертке для не инициализированного слайдера:

    .myslider:not(.owl-loaded) {
      height: 300px;
      overflow-y: scroll;
    }


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

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    О, мой любимый холиварчик! =))

    Начнем с indent vs brackets. Код с отступами лаконичен, по-своему красив, но обладает фатальным недостатком — его нельзя просто так взять и скопипастить из одного места в другое. Отступы обязательно нарушатся, IDE не поймёт и всё развалится. Нужно вручную поправлять, чтобы все встало на свои места. Также в процессе рефакторинга нарушаются отступы и появляется геморр. Второй серьёзный недостаток — это несовместимость с native css. Нельзя взять кусок css кода из интернетов и вставить в свой файл, его нужно вручную (или онлайн конвертером) переформатировать под нужный синтаксис. Всё это лишние телодвижения, лишние сложности, трата времени. Поэтому только скобки. Благо скобочный синтаксис поддерживается во всех трех препроцессорах.

    В пункте 3 вы ерунду написали. Никто в серьезном проекте не будет подключать браузерный компилятор стилей. Даже при использовании less стили все равно обрабатываются заранее и на продакшн выкладывается готовый css файл.
    Так что это преимущество less не стоит брать во внимание от слова "вообще".

    [Написанное в следующем абзаце, исключительно моё мнение, а не общепризнанные факты]
    Почему же sass выигрывает? Во-первых, это достаточно мощный препроцессор, с огромным количеством возможностей. Во-вторых, и я думаю, это главное, он единственный, компилятор которого написан на "С" -> скорость работы. Другие два написаны на javascript. И в-третьих, исторически так сложилось. Стайлус крутой препроцессор, но он появился много позже остальных и возможно, еще не успел набрать популярность.

    В свою очередь у scss есть свои серьёзные недостатки.
    Первый — невозможно в scss/sass файл импортировать обычный css, он не будет включен файл, а будет заменен css-импортом. В других препроцессорах имеются специальные синтаксические конструкции для этого.
    Второй — отсутствие резолвинга путей, что другими так же предоставляется "из коробки". Приходится извращаться с прописыванием путей к картинкам. Проблема нивелируется при использовании вэбпака, но ведь не всегда он используется.

    Что касается меня, то я готов мирится с этими двумя недостатками sass. Остальные возможности их с лихвой перекрывают.
    На чем вам остановиться,я советовать не буду. Я свободно работаю со всеми тремя инструментами, но новые проекты всегда начинаю с использованием scss.
    Ответ написан
  • Как сделать background в виде такой полосы?

    delphinpro
    @delphinpro
    frontend developer
    самое простое - линейный градиент на общий блок
    Ответ написан
  • Изображения вставлены через атрибут тега style="background-image: url()". Почему?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Вы не усмотрели самого главного:
    5c1a74d4749cd428813580.png

    Чтобы оценить, смотрим уровень браузерной поддержки здесь https://caniuse.com/#feat=object-fit
    и здесь https://caniuse.com/#feat=background-img-opts

    И понимаем, что надежнее вставить картинку фоном, нежели использовать object-fit на теге img
    Ответ написан
  • Как с CSS скрыть все элементы порядковый номер которых больше 4-х?

    delphinpro
    @delphinpro
    frontend developer
    https://jsfiddle.net/3ryg76hb/1/

    nth-of-type использовать на элементах списка немного бессмысленно =) Кроме элементов li список не может содержать ничего другого. Достаточно nth-child.
    Ответ написан
  • Как Вы относитесь к SMACSS?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Css классы вообще не несут никакой семантики. Хоть как обзывайте, всем пофиг. Если вы говорите о "понятности" для программиста/верстальщика, то тут вы правы — мнения разные.
    Что такое .title? Заголовок. Какой заголовок? А хз...
    А что такое .product-item__title? Это заголовок блока в списке товаров. Very good.

    Окей. Но мы же видим в разметке class="title _product-item". А в css мы это видим? Нет. У нас голый класс .title {}, и еще где-то составной есть .title._product-item. Очевидно, что .title используется с другими блоками тоже. Пришел новый человек с задачей поменять поменять цвет тайтлов ну допустим в отзывах. Он откроет страницу, посмотрит в инспектор, увидит что цвет заголовка задан в классе .title, а про .title._product-item он даже не в курсе будет, это на другой странице сайта, в css через 1000 строк. Он просто поменяет цвет в .title. А потом выяснится что заголовки в товарах тоже поменяли цвет. А не надо было.

    Короче, ребята, зачем вы ищете и выдумываете разную хрень? Всё уже придумано до вас — БЭМ. И не дураки это придумывали, а люди с большим опытом верстки и поддержки проектов разного уровня. А претензии типа "мне не нравятся длинные названия классов" — ну право же, детский сад, надо взрослеть.

    Ну и можно слегка поэкспериментировать, объединив SMACSS с BEM.
    Оставить уровни base и layout. Оставить уровень modules — по сути это будут БЭМ-блоки. Стейты выкинуть — состояния блока лучше в нем самом описывать. Темы — по желанию.

    если не использовать SASS - а это зачастую не используется, так как работаю часто с готовыми проектами.

    Если приходится лезть в готовый проект, то стоит изучить его и придерживаться стиля заданного автором. Если там нет никакого стиля, то сам бог велел наговнокодить =)) Ну или отрефакторить, если заказчик готов платить.
    Ответ написан
  • Эти картинки лучше делать через тэг img(или псевдоэлемент)?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Именно эти картинки (иконки) лучше всего загнать в символьный спрайт и вставлять в html особой конструкцией (покажу ниже).

    Символьный спрайт — это один svg файл с набором множества символов. Из каждой иконки достается картинка (отбрасывается вся служебная инфа) и добавляется в общий файл тегом symbol. Такой файл-спрайт будет выглядеть примерно так:

    <?xml version="1.0" encoding="utf-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    
    	<symbol viewBox="0 0 60 60" id="accounting" xmlns="http://www.w3.org/2000/svg">
    		<path d="M59 20....."/>
    		<path d="M35 32....."/>
    		<path d="M38 5h....."/>
    	</symbol>
    
    	<symbol viewBox="0 0 60 60" id="archive" xmlns="http://www.w3.org/2000/svg">
    		<path d="M59 20....."/>
    		<path d="M35 32....."/>
    		<path d="M38 5h....."/>
    	</symbol>
    </svg>


    Обратите внимание на идентификаторы символов — по ним будут вставляться иконки в html. Также обратите внимание на отсутствие стилизующих атрибутов и атрибутов style в элементах (path) картинки. Это важно, если вы хотите задавать цвет картинки через css.

    Картинка из такого спрайта вставляется в html следующей конструкцией:

    <svg class="my-icon">
        <use xlink:href="images/svg-sprite.svg#archive"></use>
    </svg>


    Здесь указывается путь к картинке и после решетки тот самый идентификатор символа, указанный внутри спрайта.

    Теперь вы можете полностью управлять вставленной картинкой стилями:

    .my-icon {
      width: 50px;
      height: 50px;
      fill: orange; /* Цвет заливки */
      stroke: blue; /* Цвет обводки */
    }


    Вы можете задать цвет, равным currentColor, и тогда иконка будет того же цвета, что и свойство color. Это бывает удобно.

    .my-icon {
      fill: currentColor; /* Цвет заливки */
    }


    Примечание. В IE есть небольшие проблемы с этим способом. СВГ-спрайт должен быть вставлен в тело страницы. Рекомендую для устранения проблемы воспользоваться скриптом svg4everybody.
    Ответ написан
  • Сетки, с чем их едят?

    delphinpro
    @delphinpro
    frontend developer
    Сетка нужна, в первую очередь, дизайнеру. Чтобы выстроить элементы дизайна ровненько, по феншую, на всех страницах одинаково — блоки на скачут в положениях и размерах.

    Верстальщик, в свою очередь, видит, что дизайн выстроен по сетке, и решает упростить себе задачу верстки. Он пишет базовые классы для разметки на странице колонок и размещает блоки в них. Отсюда отпадает необходимость сидеть с линейкой и выравнивать блоки по дизайну.

    Всё остальное — следствие. Верстальщику становится мало просто классов для описания раскладки макета. Он решает приправить их медиа-запросами, чтобы и базовая адаптивность страницы была что называется "из-коробки". Опять же для упрощения и ускорения своего труда. Потом решает еще что-то добавить, к примеру смещение колонок и т.п.

    Так появились типовые сетки, типа бутстрапа. Так как они предназначены для универсального использования, в них сделали возможности для настройки основных параметров — количества колонок, промежутков между ними, ширин контейнеров и т.д.

    Потом появились дизайнеры, которые стали рисовать свои макеты "под бутстрап" =) Ничего плохого, это ускоряет (а значит удешевляет) разработку конечного продукта. Но нужно понимать, что дизайн первичен. А сетку можно любую сделать.
    Ответ написан
  • Как исправить некорректное поведение блока при наведении в браузерах Chromium?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ощущение, что браузер самостоятельно определяет в какую сторону "расширить" контент (увеличивающийся тег параграфа) так, чтобы он был на виду. А из-за флексов возникает визуального ощущение смещения соседнего контента. На самом деле изменяется скролл страницы.

    Интересно, что при наличии в области видимости других элементов, такого поведения не наблюдается. https://jsfiddle.net/s9n85rd7/106/

    Вряд ли это можно исправить.
    Ответ написан
  • А для чего @retina-dpi:144dpi; @retina-dppx:1.5dppx; и как часто используется и для чего @media(min-resolution: ??

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    про retina-dpi:144dpi слышу впервые. а вот мин-резолюшн это вполне нормальное правило. Используется для подгонки дизайна под разную плотность дисплеев
    Ответ написан
  • Как правильно настроить CSS медиа запросы?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Правило перекрывается более приоритетным селектором

    Всё верно.
    Селектор один и тот же. Но один (ваш) расположен во внешнем файле, второй встроен в страницу через тег style. При одинаковой специфичности селекторов приоритет отдается встроенному в страницу (срабатывает каскад).

    Выхода три
    1. Поместить свои стили в теле страницы после чужих.
    2. Вынести чужие стили во внешний файл, подключаемый перед вашим.
    3. Увеличить специфичность своего селектора. Это наиболее простой метод. Самое-самое простое — добавить !important своим правилам. Или включить еще какой-то класс/тег в свою цепочку селекторов.

    Есть еще 4 варик — исправить непосредственно чужой стиль.
    Ответ написан