Ответы пользователя по тегу CSS
  • Как правильно просматривать сайт на разных разрешениях экрана?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Если у тебя на стороне php стоит добавление каких либо классов или wp_is_mobile (о ужас) прикручен - то обновление страницы будет влиять... Но так никто в здравом уме не делает.

    Медиазапросы css и флексовая минимум или верстка гридами позволяет вообще к минимум медиазапросы свести. И грамотная вёрстка сразу почти адаптивная будет.

    Теперь про яблокофоны - у них проблемы как правило с менюшками - то не открываются они... Ну в общем если на одном яблокофоне все отрабатывает верно (не старей 2х лет) - то и все остальные яблочные гаджеты тоже будет норм.

    А так всё верно - если надо железно убедиться что в устройствах все норм - есть сервис - там у них работают множество реальных устройств и с ними надежность теста высокая.

    Я за ctrl + shift + m - эта проверка покрывает большинство задач.
    Ответ написан
    1 комментарий
  • Адекватно ли делать большую вложенность в css?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Не адекватно.

    Больший вес селекторов - больший бардак, больший вес файла - медленная загрузка.
    Используй префиксы (.mypref_product) - если bem не под силу.

    id - это костыль для перевеса. Потом вдруг понадобится ему перевес сделать - это выстрел в ногу (как и important)

    Еще как признак дурного вкуса к длинным префиксам - плагин elementor сделал префикс "elementor" - вы бы посмотрели какие монструозные конструкции появляются с этим именем. А плагин активно используют несколько миллионов юзеров. Такая жесть elementor.com - гляньте что там в верстке за каша
    Ответ написан
    Комментировать
  • Что лучше использовать в блочной верстке - margin или padding?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    2 margin схлопываются - для внешних отступов - идеально.
    padding - внутренние отступы. Без них никак если захочешь border-ом обвести и выделить блок.
    есть еще line-height - межстрочный интервал. Но думаю с ним тебе через год практики на первых двух надо переходить ;-)
    Ответ написан
  • Как сделать форму на "несколько страниц" без перезагрузки?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    3 варианта:

    1. Форма вся выводится и разделается на секции - простой js/jquery. Пока показана секция 1, секции 2 и 3 скрыты. css анимации

    2. ajax/fetch - форма подгружается пошагово, заменяя в div данные

    3 - rest api + react/vue - для психов. Но и такой вариант возможен для такой простой задачи
    Ответ написан
    Комментировать
  • Как найти не используемые css классы?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Разбивай на компоненты код - и потом на сборку. Как весь мир фронтенд собирает

    В момент когда будешь спагетти css разбирать на секции - ты найдешь неиспользуемые стили.
    Но это в трио: css, html, js - только так найдешь по всем.

    Еще вариант - я вижу что css с душком (без префикса, без BEM и т.д.) - то провожу поиск этого имени по всему проекту. В коде, верстке в js - он найдет все вхождения. Если не найдет - смело удаляй. Но - при условии что ты знаешь как работает проект. А то наломаешь дров если там зависимость от чего-то с третьей стороны идёт.

    css не чистить надо. Его надо разбивать на модули - файлы. И тогда бардака не будет. И объединять все файлы тем же вебпаком
    Ответ написан
    3 комментария
  • Как изменить стили на Wordpress с помощью patch файла?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Жмёшь F12 в браузере. Тыкаешь на исследовать и выбираешь нужный в хедере.
    Смотришь стили справа - вписываешь например так
    .heder-что-то {
    opacity: 1;
    }

    отдаешь это своему клиенту - и пусть вписывает в админке в кастомные стили темы сам, если доступы зажал.

    Какой патч? Вы там перекурили с шоколадом не те мануалы. Нет у вордпресса никаких систем патчей для добавления.
    Ответ написан
    Комментировать
  • Конфликт стиле в wordpress?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    :)
    Не все темы пишутся верно.

    Есть куча тегов и тема (темы) пытается их переписать. Я в этой ветке собирал основные моменты верстки под разные темы и плагины https://cutt.ly/oe22sj3

    Причем и темы из ядра вордпресс тянут одеяло под себя. БЭМ тут мало поможет. Только опыт
    Ответ написан
    Комментировать
  • Как добавить ссылку, только для телефонов?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Медиазапрос и pointer-events
    Ответ написан
    Комментировать
  • Как добавить иконку заголовку виджета в Wordpress?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    #nav_menu-5
    #text-2 - у виджетов разные id. зацепиться можно

    и в body классы разные
    https://www.youtube.com/watch?v=yntt4BpgJNw&t=404s
    лучше осилить все 4-ре части видео
    Ответ написан
    1 комментарий
  • Почему не работает уменьшение толщины шрифта?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Подключай шрифты которые содержат этот набор (а может ты сам их подключал исключив другие начертания).

    А то часто бывает 400 да 900 в наборах
    Ответ написан
    Комментировать
  • Стилизация the_author_link()?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    get_the_author_meta( 'url' ) и оформляйте в ссылку и добавляйте нужные атрибуты
    Ответ написан
    2 комментария
  • Оцените вёрстку?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Верхняя часть по tab не доступна. Над доступностью поработайте.

    Иконка "вход" если с нее прыгать на кнопку и за пределы - то переходы резкие на иконке. delay и на иконке нужен.

    Кликаю по слайдеру - возвращает к верху. А если у телефона горизонтальная ориентация - то это пугает дерганье к верху.

    Зачем в слайдере картинки на 1000 пикселей (200 килобайт) если у меня экран 360? И все 3 картинки в нём разом не нужны. Можно же по клику их инициализировать.

    "Для поставщиков и О производстве" в подвале - слишком близко друг к другу. На мобильном и женщинам промахнуться легко с их тоненькими пальцами.

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

    Слайдеры цены (filter-form__range-scale) у меня не двигаются, в консоли ошибка https://yadi.sk/i/jySkrd3FVd5QSg

    Ну если тестировать саму вёрстку - то вроде норм.
    Ответ написан
  • Для чего -webkit-font-smoothing: antialised?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Для хромиум браузеров - видим префикс -webkit-
    потом идет шрифт и сглаживание. Т.е., складывая вместе, получаем механизм сглаживания шрифтов в хроме. Подробности тут https://caniuse.com/#feat=font-smooth
    Ответ написан
    Комментировать
  • Когда правлю css через Custom CSS/JS куда дописываются стили?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Скорей всего - в базе данных. И это плохо. Потом они берутся оттуда и инлайном в хедер вставляются.
    И если у вас таких стилей будет много - это очень плохо. В базе этот мусор храниться не должен. Таблица опций раздувается и несколько медленней начинает работать сайт.

    Инлайн стили имеют приоритет перед обычными css файлами.
    Чтобы в дочерней теме стили отрабатывали - вы должны понимать - они должны быть ниже по коду (позже загружаться), т.к. если они "весят" (специфичность) одинаково - то и идти они должны позже родительских css. Если идут раньше - то им надо сделать "перевес" - например добавив :root или body перед классом. Примерно так: :root .need-class {margin:2px;}
    Ответ написан
  • Что надо подучить, чтобы можно было более менее свободно верстку делать из PSD макета?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Посмотреть как это делают крутые парни https://www.youtube.com/watch?v=PrvilFct91I
    Видосов много.

    Конечно вам нужен фотошоп - чтоб psd вкрыть

    Emmet - ускорит верстку.
    live reload из ide в браузере (собственно как и нормальная ide, а не текстовый редактор аля notepad++ или sublime)
    Конечно же консоль браузера осваивайте - там столько возможностей.

    Бутстрап... Типовые сайты если делать похожие друг на друга. Это скучно. Он хорош для быстрого прототипирования. Хотя уже есть онлайн инструменты для быстрого накидывания html макетов и верстки.

    js - надо знать, ну чуток jquery (хотя уже нет)

    css 3 - обязательно. Псевдоселекторы, атрибуты. Совместимость всего зоопарка с браузерами (caninuse - наш друг).
    svg применять
    Шрифты и иконки
    Верхние 3 пункта: дизайнеры иногда так макет завернут - думаешь: "а как, его мать, он думает это делается?"

    флекс - обязательно знать. Гриды пока только по выходным почитать, поиграться. Также как и css переменные.
    Медиазапросы - обязательно знать
    Принципы адаптивности, mobile first и конечно же для простоты стилей BEM применять.

    Элементор - забудьте. Это не знания.

    Коли вы в тегах указали вордпресс - то его апи знать нужно. Циклы, хуки, базовые функции используемые в ВП темах. Много что нужно освоить.
    Если нужны настройки в админке - кастомизация темы - освойте ВП кастомайзер. Мощная штука в ядре ВП.
    Апи виджетов - это тоже ядро ВП

    Гит - понимание и версионность - очень удобно.

    Верстать под ВП это не только фронтенд. Тут понятие намного шире. Вам придется работать с php - его знать и учить придется.

    Потом, как надоест это дело с натягиванием на ВП, будете писать плагины. Вот тут и ценник выше и востребованность и интересней. + возможность развивать свои pro версии ну и понеслось...

    p.s. не хейта ради я тут некоторые технологии и инструменты назвал против них мнение, а лично мой выбор спустя несколько лет. т.к. я это прошел сам, спотыкаясь. ИМХО - оно не конечная точка зрения, а мнение личное из опыта.
    Ответ написан
    Комментировать
  • Правильно ли так? Или все-таки костыль?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    не так:
    a:hover {
      border: solid 1px;
    }

    а так: border-color: #000; - не нужно дублировать значения - вы их задали выше. Теперь вам надо поменять только цвет

    По поводу вопроса - это обычная практика.
    Ответ написан
    Комментировать
  • Как врубать slick.js на определенном разрешении?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    if ($(window).width() <= 980) {
    ...some
    }
    Ответ написан
    1 комментарий
  • Есть ли решение, как менять цвет элемента в зависимости от фона за ним?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Возможно стоит посмотреть в сторону background-blend-mode - но с поддержкой пока не все хорошо. Но можно найти полифилы под него
    Ответ написан
    Комментировать
  • Как делать адаптивные галереи?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Делал подобное на flex
    https://codeseller.ru/wp-content/uploads/2017/10/U...
    https://codeseller.ru/wp-content/uploads/2017/10/U...

    гуглите в сторону object-fit и полифила под старые браузеры
    Новые браузеры его отлично поддерживают https://caniuse.com/#feat=object-fit
    Ответ написан
    Комментировать
  • Как побороть css !important?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Есть такое понятие как "вес" css правила. Вот здесь я рассматривал его https://codeseller.ru/forum/product-13876/vidoizme...
    Вам нужно перебить весом - добавив класс или id. Тогда и порядок загрузки не важен будет
    Ответ написан
    Комментировать