Ответы пользователя по тегу CSS
  • Как сделать кнопку «play» как в YouTube?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Упростил https://codepen.io/Otshelnik-Fm/pen/rNRbKKv
    Это один блок. псевдоселлекторы before и after не создают дополнительно в дом дереве. Так что это все еще один dom элемент.
    Если нужно еще проще - в background закодируй svg иконку ютуб кнопки. Но вес будет больше. Тут оптимальный вариант соотношения веса и без запроса к иконке
    Ответ написан
    1 комментарий
  • Как сделать чтобы картинка подстраивалась под высоту экрана?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Использовать height 100% и object-fit или background-size

    Или же aspect-ratio - указав пропорции ширины высоты
    Ответ написан
    Комментировать
  • Почему position: relative + z-index: 0 перекрывает position: fixed + z-index: 100?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Потому что position: sticky;
    .aside {
    	position: sticky;
    	z-index: 100; /*добавить*/
    }


    https://stackoverflow.com/questions/53105658/css-p...
    Ответ написан
    Комментировать
  • Как вставить самописный блок html/css + js на уже созданные темы wordpress?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Фильтры, хуки, шорткоды, виджеты, меню, js append - вставляй - не хочу
    Ответ написан
    Комментировать
  • Почему не получается научиться верстать?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Устройся на вакансию за доширак + офис подмести после ухода. Там и научишься - когда в стотысячный раз вам дадут развалившийся сайт на бутстрапе фиксить.

    Возраст то какой? Может уже всё... мозги подстроились только потреблять инсту и сериальчики?
    Работа над собой не начинается с нытья про то "как я не могу". Я обычно говорю "смогу" и буксую в нужном направлении.

    А себе ответьте - зачем вам верстать? Может лучше в столяры или плотники податься? Если вы в IT ради бабла - как и все... То это дорога для тех, кто попадёт в струю или светлых голов.
    Ответ написан
  • Какой вариант подключения шрифтов оптимален?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    А еще выкидываешь изнутри шрифта неиспользуемое - всякие ненужные символы, буквы вязи и языки, например, если не используешь украинские i и прочие и комментирования на них не будет.

    Было у меня:
    Исходные данные шрифта Roboto в байтах:
    roboto-300.woff - 28192
    roboto-300.woff2 - 21908
    roboto-400.woff - 28188
    roboto-400.woff2 - 21968
    roboto-500.woff - 28676
    roboto-500.woff2 - 22456

    В финале я получил:
    roboto-custom-300.woff - 18648
    roboto-custom-300.woff2 - 14144
    roboto-custom-400.woff - 18728
    roboto-custom-400.woff2 - 14244
    roboto-custom-500.woff - 18732
    roboto-custom-500.woff2 - 14172

    В байтах. Т.е. в некоторых случаях мы получили на 35% меньший размер!

    Гугли: WebOverclock otshelnik-fm

    В 2021 году важную роль играет скорость загрузки сайта
    а в 2020 что не важно было? Важно.
    Ответ написан
    Комментировать
  • Как ограничить область влияния внешнего CSS файла?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Любой адекватный разраб знает что для имен классов надо добавлять префикс. Тогда влияние стороннего сведется к минимуму.
    Так все под вордпресс разрабатывают.
    И еще в стилизации используй только классы а не теги. т.е. item > span или article > img - это говнецо. И так никто не пишет. Пишут примерно так: otfm-article или если пикча: otfm-avatar
    Да - чуток больше придется писать. Но не делай как элементор: elementor-wrapper, elementor-item - это не префиксы, а спам и реклама. И готовая страница получается тяжеловесная. хз что эти разрабы не сделали префикс покроче. Возьми раздербань любой сайт на элементоре и увидишь ад

    Ну и используй BEM чтобы кучу вложенных селекторов не писать
    Ответ написан
  • Как расположить изображения плиткой, как во Вконтакте?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Примерно похожее делал - компоновал галерею маркируя дополнительным классом горизонтальное и вертикальное изображение (на php получить размеры из метаданных пикчи проблем нет). Css классом писал кол-во в wrapper изображений. Потом была магия css
    Получилось примерно так: https://yadi.sk/i/0_2_7kD2ZGU04A
    классы хитрые https://yadi.sk/i/QoiKqQsbz0S7zg но там 50 строк css для вариаций и их отображений.
    С js заморачиваться не хотел - решил в лоб

    p.s. ссылку дать не могу - тостер не пропускает урл (наверно потому что основной домен указан у меня в профиле - по нему тостер саморекламой считает)
    Ответ написан
    5 комментариев
  • Нужно-ли знать яп (+ html, css) при работе с Wordpress?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Нужно знать и ЯП и более. Но знание высшей математики тут не нужно. Достаточно простого - "если<->то", ну и обычный начальный курс школьной математики

    php + mysql + js + jquery + css + html + умение ГУГЛИТЬ НА АНГЛИЙСКОМ + умение и понимание как устроен ВП (хуки, функции, дочерние темы, популярные апи и т.д.). Умение работать со сторонними апи (соцсети, платежные системы, карты и т.д.)
    Не ведитесь на билдеры - это и вроде быстрый старт и потом два шага назад + проблемы переезда и ухода от него.
    Ну и их как макак - тех кто на билдерах делает сайты (термин monkey manager). Но клиент дважды потом к таакому спецу не пойдет. т.к. клиент упирается в то что вы его подсадили на билдер - и доверия к вам, как к грамотному специалисту - не будет.

    В общем: умение месить глину - не поможет вам стать отличным гончаром. надо много учиться, практиковаться и жить этим. Если вы за баблом - то это провальная тема. Войти в айти - это сложная наука. В блогах "как я стал программистом с окладом в 2000 зелени за 3 месяца" - врут. Как правило это пишут инфоцыгане чтоб продать свои курсы. А на дне фрилансерском битва за доширак ведется.
    Ответ написан
    Комментировать
  • Зачем писать классы, если можно писать все напрямую?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Придёт сеошник - скажет "Отсюда h2 выкинуть" или "Отсюда h2 выкинуть выше" и правило .block-catalog h2 будет сиротой. Потому как плохая практика вешать стилевые правила на теги. Также и span в див превратится может и article тег в див обернется - а правила завязанные на тегах будут брошенными.

    Никогда не рефакторил чужой css? Там столько заброшенного ))

    Вторая причина - каскадность. "Вес" (специфичность) .block-catalog h2 больше чем .block-catalog__title-header и соответственно твой бэм подход может в один момент дать сбой. Потому как придется перебивать стили большей специфичностью - если вдруг не сможешь ниже нужного css правила дописать. На практике такое часто - у тебя нет доступа с нужному css и твой css раньше загружается
    Ответ написан
    Комментировать
  • Почему CSS Grid не стоит делать?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Но никто не написал почему крупные компании его не используют. Отвечу - потому что там правят балом маркетологи. Которые как последние с*чки цепляются даже за 0.1% прибыли. И др*чат своих техлидов чтоб они как погонщики гоняли своих прогеров, а те упарывались на флексах, флоатах ради этой самой поддержки отсталых компов, людей, нищебродов... зато на конфах потом поют о том ой какое зло то и это... А у самих интерфейс тупит (привет яндекс метрика с ее прелоадером и скелетоном - что за псих это сделал - бесит ждать типа ща все загрузится)
    Как то так. А по факту быстродействия - ну да там наверно и js бандл на 2 мегабайта тянется, который гзипом 500 килобайт весит, а потом распаковывается, выполняется... а вы говорите про то что css виноват. Виной всегда человеческий фактор. Врядли calc замедлит страницу. Это проверить легко - создавайте макет с 1000 калькуляций - и проверьте свои догадки
    Ответ написан
    1 комментарий
  • Как изменить ссылки css с http на https - wordpress?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Зачем в конфиге - когда в основных настройках https вписывать надо?
    Вообще работы на полчаса - при правильном подходе с заменой всех http вхождений и правильной замене сериализованных данных в БД.
    В гугле написано много толковых руководств. Я не про те которые советуют припарить really ssl и прочей ерундой которая лишь маскирует и вешает дополнительный слой проверок на лету
    Ответ написан
  • Почему bootstrap4 работает частично и сильно грузит сайт на WordPress?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Ответили на 1-й вопрос, отвечу по тормозам...

    Потому что бутстрап в себе содержит максимум. А ты используешь 5% от силы.
    Отсюда вывод - собирай его под свой проект отдельно - только нужные компоненты и состояния.

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

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    верстай флексами. Они позволят разнести эти 3 элемента в строке. Они позволят отцентровать. Ну и css переменную для шрифта и медиазапрос регулирующий его величину.

    То что ты просишь это первоклашки класс в css делают.
    Ответ написан
    Комментировать
  • Как писать хороший и расширяемый css код?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    БЭМ и css переменные.
    Ответ написан
    Комментировать
  • Загружаются ли картинки, которые прописаны для других размеров экранов через медиатег?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Ваш ответ наверно тут otshelnik-fm.ru/post-group/zagruzhaem-background-v-wordpress-temu-tolko-dlya-shirokix-ekranov-pk/
    Браузеры умеют медиазапросы и достаточно умны чтобы и пикчи оттуда не выкачивать если медиазапрос не сработал
    Ответ написан
    Комментировать
  • Как правильно создать критический css?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    1. делай срез по своей аудитории. Может тебя только с смарт тв смотрят.
    2. пробуй Splash screen. Для второй страницы он не нужен будет - т.к. стили уже в кеше
    3. см пункт 2
    Ответ написан
    Комментировать
  • Custom Css в новой таксономии?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    В теге body есть нужный класс. Цепляйся за него а ниже - специфичность css
    Ответ написан
  • Оптимизация Wordpress. Или как оставить только нужное в head?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    У тебя проблема не в очистке head, а в элементоре. Стоит выкинуть элементор и переверстать в свою ВП тему.
    Объясни это заказчику. А то что ты делаешь - экономия на спичках. Потратишь 80% времени, получишь 20% результата. 20% от 90 это сколько? Хорошо если 91 получишь. Оно того стоит?

    Все что советуют с кешами - это советы принимать ибупрофен, когда ногу оторвало и снова ибупрофен принимать и т.д.

    Прям кушать нечего - таких заказчиков держишь? Займись делом и перед продакшеном переверстай то что накидали в элементоре в своей ВП теме. Потому что элементор - для прототипирования. т.е. когда заказчик не знает какой дизайн и блоки какие ему нужны.
    Диз устаканили? Тогда занимайтесь оптимизацией: всё перенеся в свою ВП тему. Не умеешь? Учись или отдавай на аутсорс/отказывайся.
    Так как ты рассуждаешь - неверно. Сказывается отсутствие опыта - т.к. ты не понимаешь последствий дальнейшей техподдержки сайта - отключив js/css ты своему клиенту закладываешь бомбу замедленного действия. Потом это скажется на твоей репутации.
    Ответ написан
    Комментировать
  • CSS ошибка keyframe?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Ваш блокнот или ide не поддерживает синтаксис "нового" https://caniuse.com/#feat=css-animation css. оттого и пишет ошибку -т.к. ей эта конструкция не знакома.

    Что за прога/библиотека выдает ошибку и какой она версии?
    Ответ написан
    Комментировать