• Понимание аспектов JavaScript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    'строка'.__proto__ - выведет прототип строки String, в котором будут его методы. (в консоле по крайней мере)
    А вот сами методы написаны на native код. То есть на Cи. Посмотреть их не выйдет, они выполняются под капотом и нам недоступны.

    при создании нового объекта класса
    Вы имеете в виду при создании экземпляра класса? Через new? Да, он будет с методами, определёнными в классе и в прототипе объекта.
    Написано
  • Как сделать, чтобы сайт быстрее загружался?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Анна, Своя сетка это хорошо для опыта. Для работы лучше использовать проверенные сообществом решения. У бутстрапа можно скачать только сетку, без всего остального что он предлагает. Уметь верстать по бутстрапа сетке тоже пригождается в работе.
    Написано
  • Раскрытие карточки товара при наведении?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Tereverda, бутстрап не про это потому что.
    Делаете обёртку для карточки, которой задаёте overflow: hidden, и делаете саму карточку соответствующего размера.
    По наведению убираете overflow с контейнера.
    Профит.

    Хотя у бутстрапа наверное есть хелпер класс про оверфлоу.
    Написано
  • Как сделать, чтобы сайт быстрее загружался?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Анна, Вам в целом нужно почитать про сетки, не обязательно про именно css grid.
    css grid это лишь возможная технология для реализации сетки. Технология, которая была для этого специально разработана.

    А так почитать о сетках можно, например, тут:
    https://practicum.yandex.ru/blog/chto-takoe-moduln... - в целом какую задачу решают сетки.
    https://developer.mozilla.org/ru/docs/Learn/CSS/CS... - от флоатов до гридов.

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

    А не надо придумывать каждый раз) Вам нужно выделить сетку в отдельную абстракцию, не привязанную к проекту. Если проект со стороны дизайна создан по сетке. то нужно придумать один раз и везде использовать. Ну или скачать готовую "стандартную" 12ти колоночную сетку.
    Написано
  • Как зафиксировать анимацию кнопки в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Что значит "зафиксировать"?
    Написано
  • Как сделать, чтобы сайт быстрее загружался?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Анна, не за что, обращайтесь.
    Написано
  • Стоит ли изучить PUG?

    MrDecoy
    @MrDecoy
    Илья,
    Ниша у PUG в целом сомнительная в современной разработке. Как по мне, он нужен чисто верстальщикам, которые просто 24\7 верстают голый HTML.
    Интеграция пага с "большой тройкой" - Vue, React, Angular не имеет особого смысла, т.к. компонентный подход толкает тебя разбивать полотна html на переиспользуемые кусочки и профит от PUG теряется (а интеграция ещё и может подкинуть головной боли). + разметку можно нагенерировать с помощью Emmet.

    Поэтому я считаю что его в принципе учить не стоит. Только если вдруг возникла какая-то необходимость.

    В "современной разработке" вместо него jsx\tsx и template во vue с встроенными директивами для циклов, ветвления и тд.
    Написано
  • Можно ли из круга сделать такую фигуру?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Что значит "есть картинка" нужно сделать её такой формы?
    То есть из всего круга вырезать такую форму и чтобы всё по бокам отрезалось? Или что?

    Если просто блок нужно сделать такой формы, то на глаз что-то типа того:
    .block {
      border-radius: 35% 65% 78% 22% / 55% 72% 28% 45%;
      transform: skewY(20deg);
    }


    https://9elements.github.io/fancy-border-radius/#5...
    Написано
  • Как сделать наклонный градиент через CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    nikitapremium, зависит от браузерной поддержки, которая Вам нужна.
    Универсально это что-то абстрактное.
    Если под универсальностью понимать "будет лучше работать у большего количества пользователей", то перекрывающий белый треугольник более универсальный. Ну и в реализации, для Вас, полагаю, будет проще, если не получается разобраться с clip-path.
    Написано
  • Как сделать, чтобы сайт быстрее загружался?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Анна, У Вас достаточно хорошие показатели Lighthouse. Не много сайтов (в процентах) могли бы похвастаться подобными результатами.
    Ну и в целом у лайтхауса местами достаточно жёсткие требования и не всегда нужно слепо им следовать.

    Говорится что картинка отдавалась\загружалась пол секунды. Ну, с одной стороны, да, это многовато, с другой - это фоновое изображение. Оно браузером загружается с меньшим приоритетом чем контентные изображения и его загрузка не ведёт к перерасчёту разметки. Так что, будто бы не страшно. Потреблять пользователю контент не мешает. Размера картинки что-то не увидел. Но т.к. она под чёрным полупрозрачным фоном, качество ей можно и подрезать немного. Тут уже на вкус и цвет и желание заказчика.

    На счёт уникальных классов если честно бегло по картинка вижу много повторяющегося\похоже\реиспоьльзуемого.
    Вы используете сетки? Это помогает располагать контент вроде как по-разному, но при этом не писать для каждого блока своё расположение. Сетки могут быть аля bootstrap сетка(float\flex\grid в зависимости от версии) или встроенные css grid.

    Совсем без уникальных классов конечно же не обойдётся.
    Можно уникальные для страницы стили вынести в отдельные файлы и подключать к странице несколько CSS. Общий и уникальный для неё.

    Но это, опять же, не выглядит для Вас необходимым. Показатели хорошие.

    По поводу препроцессоров: все вокруг их используют, а я еще нет, и создается впечатление, что это неправильно, и нужно тоже ими пользоваться. Как я поняла, так получается более красивый код без лишнего мусора вроде различных дубликатов.

    Сильно зависит от "окружения". На западе, например, пару лет назад был тренд отказа от препроцессоров. У нас такого пока не наблюдается. Но это на самом деле и не важно. Это лишь инструмент. Знать его стоит. Как минимум для продвижения по профессиональной лестнице. Использовать везде и всюду - нет.
    А получается ли более красивый код без лишнего мусора это большой вопрос. Как я сказал в первом комментарии - зависит от "шеф повара". Внешне в sass может казаться что всё красиво и аккуратно, а в результирующем CSS невероятная помойка.
    Написано
  • Как сделать, чтобы сайт быстрее загружался?

    MrDecoy
    @MrDecoy Куратор тега CSS
    есть 2 изображения png

    Если Вы экспортировали их с умом или они изначально не по много мегабайт каждая, то не страшно. Пока что по Вашему описанию это единственное потенциальное узкое место.
    Можно конечно намудрить с JS кодом, чтоб он блокировал отрисовку или написать трилион малополезных строк CSS но маловероятно, исходя из вашего описания, что Вы действительно так сделали.

    Я начала переживать, что сайт будет загружаться долго, т.к. код написан без препроцессоров и всяких gulp

    Технологии, с помощью которых написан и "собран" код лишь косвенно влияют на скорость загрузки.
    Даже если бы Вы написали на всём самом современном и продвинутом - это не дало бы гарантий что сайт бы не тормозил (если мы говорим про что-то более менее сложное).

    1 файл для стилей 8 страниц каталога

    Если у этих страниц одинаковый шаблон, но просто разный контент - то значит страница, по факту, одна - "каталог".
    И тогда это нормальное.
    Но если все 8 страниц больше отличаются по структуре\стилю чем похожи, то тогда 1 общий файл стилей для них может быть некоторой проблемой, так как будет раздутым и это место для оптимизации - разбить его на несколько файлов.

    Вопрос, который не дает мне уснуть: Будет ли все это нормально загружаться без less, sass, gulp и прочих магических программ

    Все эти "магические" программы на выходе дают самый обычный HTML, CSS и JS. Они помогают в написании кода, а вот то, какой будет результат, зависит только от того, как был код написан. Они не мешают сделать Вам плохо. Более того, если Вы плохо разобрались с этими технологиями, то при их использовании проще сделать плохо, чем без них.
    Это не значит что не нужно их изучать. Наоборот. Нужно. Но нужно прям разбираться и понимать какой инструмент что и как делает, чтобы не накосячить.

    Может быть, конвертировать изображения

    Может быть. Вы не показываете не изображений, да и ссылке не даёте. Но, повторюсь, если изображения изначально нормального размера и веса, то это скорее будет лишним.

    убирать вручную лишние вложенности

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

    объединит дублирующиеся свойства (один и тот же цвет и шрифт много раз, например)

    Опять же, нам сложно сказать без примера насколько это Вам необходимо, но можете попробовать воспользоваться css.github.io/csso/csso.html, например.

    Я поняла, что нужно было писать через sass, но уже поздно.

    Зачем нужно? Кому нужно? Как поняли?
    Написано
  • Как стилизовать только пустой SELECT в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Сергей К, Ну тогда очевидный вопрос, а зачем Вы пишите что не пройдёт тестирование если не знаете? Автор и сам уже взялся использовать и мной был предупреждён. Значит решение уже было принято.

    can i use говорит что global support 87%. Весьма не мало.

    10 версий хромиума, 10 версий оперы, и -1 мажорная от текущей ios.
    Не поддерживает только лиса.
    Написано
  • Как стилизовать только пустой SELECT в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Сергей К, чьё тестирование?
    Написано
  • Как сделать место для загрузки изображения?

    MrDecoy
    @MrDecoy Куратор тега CSS
    уже всё перепробовал

    Но, видимо, не попробовали самого главного, чего требуют правила сервиса - погуглить.
    "делаем кастомные инпуты для выбора файла" - https://habr.com/ru/articles/423035/

    simonenko.su/38146501854/improving-ux-for-web-form
    Написано
  • Как стилизовать только пустой SELECT в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Сергей Кореневский, Да, всё верно.
    Не за что, обращайтесь.
    Написано
  • Как стилизовать только пустой SELECT в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Сергей Кореневский, p.s. СКОРЕЕ ВССЕГО если нет option у блока, то и select внутри него нет, т.к. есть ещё datalist который тоже работает с option
    Написано
  • Как стилизовать только пустой SELECT в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Сергей Кореневский, если Вам не нужно проверять именно наличие селекта, то селектор стоит упростить и убрать has(select). Т.к. если в блоке нет option то и select в нём нет.
    Написано
  • Как стилизовать только пустой SELECT в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Сергей Кореневский, если .input-group не является селект, то логично что не работает.

    Вы на русском сформулируйте то что Вы написали:
    выбрать input-group который не является селектом с опциями.

    Судя по Вашим сообщениями. Это не то, что Вам нужно.

    Покажите разметку на какой что нужно скрыть и точно опишите условие что и когда в ней нужно скрыть - подскажу как правильно написать
    Написано