Задать вопрос
Ответы пользователя по тегу CSS
  • В чем разница между word-break: break-word и word-wrap: break-word?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Отличная статья про техники разбиения слов. Там можно чуть лучше разобраться со всеми техниками
    Ответ написан
    Комментировать
  • Как подставить в @media screen переменную из css?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Ждём спецификацию Media Queries Level 5.

    В целом, если хотите включить возможности работы спецификации не имплементированной в браузеры, то можно подключить postcss-плагин PostCSS Custom Media, тогда можно будет использовать кастомные свойства вот так:

    @custom-media --small-viewport (min-width: 768px);
    
    @media (--small-viewport) {
    	/* стили для планшета */
    }
    
    /*  в css получится вот так*/
    
    @media (min-width: 768px) {
    	/* styles for small viewport */
    }
    Ответ написан
    Комментировать
  • Как сделать такое обтекание?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Вам уже подсказали про гриды, что лучше смотреть в эту сторону. Но у меня есть дополнительные вопросы нужен ли адаптив.

    В целом это всё выглядит примерно вот так
    <div class="grid">
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
    
      <div class="image">картинка</div>
    </div>


    Элемент с картинкой можно поставить вообще в любое место внутри .grid-родителя

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 158px);
      gap: 20px;
    }
    
    .child {
      border: 1px solid #000;
      border-radius: 4px;
    }
    
    .image {
      grid-column: 1 / 3;
      grid-row: 2 / 4;
      border: 1px solid #000;
      border-radius: 4px;
    }


    64d68a5e4ab57221981814.png
    Ответ написан
    3 комментария
  • Как создать условие в mixin на Stylus, чтобы в него можно было передавать не только ValuePx, но и Value?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    У вас логика по сути сводится к отсутствию значения. На это отсутствие и нужно проверять. Если никаких единиц измерения нет, то подставь px, а если единицы измерения передали в функцию, то ничего не делай.

    В styles есть функция, которая отвечает за проверку единиц измерения (unit).

    Осталось написать логику
    padding unit($value) == '' ? ($value)px : $value

    Если передали число без единицы измерения unit($value) == '', то к $value добавь px($value)px
    Если хоть какую единицу измерения передали, то ничего не делай — $value

    Полный миксин
    mixinName($value)
      padding unit($value) == '' ? ($value)px : $value
      margin unit($value) == '' ? ($value)px : $value


    с примером
    body
      mixinName(10);
      
    p 
      mixinName(10px);
      
    b 
      mixinName(10rem);


    компилируется в
    body {
      padding: 10px;
      margin: 10px;
    }
    p {
      padding: 10px;
      margin: 10px;
    }
    b {
      padding: 10rem;
      margin: 10rem;
    }
    Ответ написан
    Комментировать
  • Первый td растягивается на всю ширину, почему?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Таблицы должны иметь одинаковое количество ячеек в каждом ряду.
    1 1 1
    1 1 1
    1 1 1


    Если какой-то ячейки нет в ряду, то вы должны растнуть ячейку на две
    1 1 1
    2   1
    1 1 1


    Если в ряду вообще одна ячейка из трёх, тогда нужно растянуть на 3 ячейки
    1 1 1
    2   1
    3


    В вашем случае нужно заменить первый и последний ряды с

    <tr>
      <td height="50px" width="100%"></td>
    </tr>


    на
    <tr>
      <td height="50px" colspan="5"></td>
    </tr>


    5 — потому что у вас 5 ячеек в втором ряду. Ячейкам во втором ряду вы уже можете указать конкретные ширины
    Ответ написан
    1 комментарий
  • Дефолтная высота контейнера для 'display: grid'?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Shimpanze, https://www.w3.org/TR/css-grid-2/
    по умолчанию высота работает как для простого display: block как в <div>. Так как по сути указывая display: grid, мы указываем display: grid block: будь внутри с гридовым контекстом, а внешее блочным.

    Вы также можете указать display: grid inline, тогда по умолчанию блок схлопнется "по тексту".

    А ещё точнее с учётом бокосовой модели с учётом контента, паддингов, бордеров и марджинов.
    Ответ написан
    1 комментарий
  • Не какие расширения не работают, что делать?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Попробуйте обновить VS Code до последней версии, либо удалите ваш VS Code, загрузите заново и установите
    Ответ написан
    3 комментария
  • Как обойти блоки?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    .text-take {
     ...
     pointer-events: none;
    }


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

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    У вас селектор .bg-img:last-child не находит элемент. Поэтому нужно подобрать подходящий селектор.

    Я бы на вашем месте на необходимый элемент добавил дополнительный класс, например bg-img-tablet и уже его скрывал на нужных разрешениях экрана.
    Ответ написан
    4 комментария
  • Как пользоваться live edit в opera(opera GX)?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Мне казалось, что Live Edit уже не работает.

    View -> Open in browser -> выбрать нужный браузер, не оно?

    Как вариант, когда вы открываете с помощью "Live edit" скопировать из урла в Google Chrome и использовать скопированный url в Opera.
    Ответ написан
    Комментировать
  • Как уменьшить нагрузку на CPU в React?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    К сожаление, Вам только вкладка Performance поможет. Посмотрите в ней, что конкретно больше времени занимает. Мне кажется, что это Layout и JS тут не причем.

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

    Я бы посоветовал прочитать вот эту статью. И в ней есть огромное количество на полезную инфу в том числе и на курсы от udacity
    Ответ написан
    Комментировать
  • Какие проблемы прямой вставки кода виджета в код стороннего сайта?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    А в чем проблема изолирования JS?

    В es5 функциональная область видимости. В es6 блочная. Этих знаний достаточно, чтобы сделать железобетонный JS. Ну и используйте переменные с блочной областью видимости - let, const.

    (function(d, w){
    //ваш код
    })(document, window)


    и всё ваш код изолирован.

    По-поводу HTML тоже проблем нет, а вот с CSS вы хапанёте очень сильно. Нужно будет скидывать стили для всех сайтов. CSS раздуется до неимоверных размеров.
    input {
      background-color: transparent !important;
      border: 1px solid #0de !important;
      ...
    }


    Если же Вы наоткуп отдаете стили, чтобы интеграторы с этим вопросом справлялись сами, то кажется, что им это не нужно. Ведь это нужно иметь штатного верстальщика и не всем он нужен. Хочется просто подключить JS и чтобы работало.

    В общем, сам я больше за iframe только из-за того, что отгребу от CSS.
    Ответ написан
  • Как сделать заголовок для INPUT сверху?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Не используйте fieldset для оформления, вы убиваете семантику элемента. Fieldset предназначен для группировки инпутов по смыслу, то есть если у нескольких инпутов одна смысловая нагрузка, например инпуты для ввода данных кредитной карточки, то есть смысл их оборачивать в fieldset в ином случае это противозаконно.

    Ничего не стоит сделать это с помощью CSS
    Ответ написан
    Комментировать
  • Как правильно адаптировать шрифты для сайта хотя-бы под 2 языка?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Поспорю с Андреем.
    2) Не храните все символы в одном шрифтовом файле, если у Вас мультиязычный сайт, то есть на сайте есть функционал, который позволяет сменить язык, то храните символы каждого "языка" в отдельных файлах. Это крайне просто.

    Зачем так делать? Опять же повторюсь, если сайт мультиязычный, то нет смысла заставлять английского пользователя скачивать кириллические символы. Уменьшив файл в несколько раз вы ускорите загрузку шрифтовых файлов. Для этого в CSS есть директива unicode-range.

    Например, для подключения кириллицы
    @font-face {
        font-display: swap;
        font-family: 'Lato';
        src: url('/fonts/lato-light/lato-light.cyrillic.woff2') format('woff2'), 
            url('/fonts/lato-light/lato-light.cyrillic.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица
    }


    Как это работает? Браузер анализирует ваш DOM понимает какие символы используются на сайте и если есть совпадение, то шрифт закачивается, то есть в данном примере если на сайте есть кириллица, то lato-light.cyrillic.woff2 скачается и отрисуется, а шрифт lato-light.latin.woff2 даже не закачается.

    Для разделения символов можно использовать инструмент fontmin, либо его gulp аналог
    Ответ написан
    8 комментариев
  • Как применить правильно justify-content?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Ответ написан
    Комментировать
  • Почему шрифт из font-family не совпадает с Rendered fonts?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Посмотрите загрузился ли шрифт в вкладке network - font.
    5c0e1aabc1749878271943.png
    Ответ написан
    Комментировать
  • Padding и margin в em – плохое решение?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Поддержку автора выше.

    Вы какую задачу решаете? Если просто выяснить, что лучше, то ничего не лучше. Пиксели отлично справляются, но это не значит, что em хуже.
    Если вам нужны динамичные отступы под ваш динамичный интерфейс, то em будет получше, но это не значит, что пиксели отстой. Опять же если весь интерфейс зиждется на r[em], то лучше придержится r[em].

    Любое решение задачи исходит из задачи/требоваия/цели =))
    Ответ написан
    Комментировать
  • Как правильно выставить пропорции для flex?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Вам нужно сделать так, чтобы левая часть была статичной

    .carcass__left {
      flex-basis: 265px;
    }

    flex-basis - говорит, сколько занимать места до распределения пустого пространства (криво выразился наверное)

    а правая тянулась на всё свободное пространство
    .carcass__right {
      flex-grow: 1;
    }


    flex-grow -как раз то свойство, которое заставляет тянуться по основной оси.

    Если же вы хотите, чтобы левый блок даже при недостаточном пустом пространстве тоже не сужался, то понадобится flex-shrink

    .carcass__left {
      background-color: green;
      flex-basis: 265px;
      flex-shrink: 0;
    }


    Полный код тут - https://codepen.io/aurfon/pen/odXxPy
    Ответ написан
    Комментировать
  • Загружает ли браузер background-image если класс не используется в html?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    В этом случае загружается.

    <style>
                .image {
                    width: 100px;
                    height: 100px;
                    background-image: url('https://hi-news.ru/wp-content/uploads/2015/01/Galaxy.jpg');
                }
            </style>
    
            <div class="image"></div>


    а в этом случае нет.
    <style>
                .image {
                    width: 100px;
                    height: 100px;
                    background-image: url('https://hi-news.ru/wp-content/uploads/2015/01/Galaxy.jpg');
                }
            </style>
    
            <div class=""></div>


    Это всё очень просто проверяется в developer tools вашего браузера. Во вкладке network
    Ответ написан
    2 комментария
  • Как правильно рисовать геометрические фигуры в css?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    SVG самый верный путь.

    Вот это полезно для начинания - css-live.ru/articles/karmannoe-rukovodstvo-po-napi...

    И Йоксель много про svg пишет - css.yoksel.ru
    Ответ написан
    2 комментария