Size: a a a

Верстка сайтов HTML/CSS/JS/PHP

2020 June 28

МК

Максим Кавецкий... in Верстка сайтов HTML/CSS/JS/PHP
Alex Elkin🇪🇸
можно, НО он их по другому будет парсить, если это тэг имидж то он его будет подгружать как часть контента еще до стилей и прочего...
Слушай, люди много поколений оптимизировали процесс и пришли к свг спрайтам, ты можешь перебрать все остальные варианты или принять что бестпарктис называются так не по чьей то злой воле.
Найди хорошую статью про свг спрайты, там описаны все альтернативы и сказано чем лучше/хуже и какие есть варианты.
источник

AE

Alex Elkin🇪🇸 in Верстка сайтов HTML/CSS/JS/PHP
возможно переоптимизировал этот кусочек
источник

МК

Максим Кавецкий... in Верстка сайтов HTML/CSS/JS/PHP
а это не css вставка в url, эт я просто скопировал в весь код между svg и вставил в  файл спрайтов
источник

AE

Alex Elkin🇪🇸 in Верстка сайтов HTML/CSS/JS/PHP
посмотри может в свг тэге остался какой то кусочек атрибута стиль или филл на который эти очки завязаны были и перевесь его на паф, а еще лучше весь свг пропихни через оптимайзер он должен годно так обрезать мусор сохранив все что нужно.
открой свго в браузере и поиграйся с настройками
источник

МК

Максим Кавецкий... in Верстка сайтов HTML/CSS/JS/PHP
Аа, это я умник убрал fill="none" у тега symbol
источник

AE

Alex Elkin🇪🇸 in Верстка сайтов HTML/CSS/JS/PHP
Максим Кавецкий
Аа, это я умник убрал fill="none" у тега symbol
хах
источник

МК

Максим Кавецкий... in Верстка сайтов HTML/CSS/JS/PHP
и теперь из-за этой ссылки будет кеширование происходить?
источник

AE

Alex Elkin🇪🇸 in Верстка сайтов HTML/CSS/JS/PHP
не она тупо покызвает где брать сорц. кешируется весь код, но когда он лежит в одном месте он кешируется один раз
источник

МК

Максим Кавецкий... in Верстка сайтов HTML/CSS/JS/PHP
Alex Elkin🇪🇸
не она тупо покызвает где брать сорц. кешируется весь код, но когда он лежит в одном месте он кешируется один раз
а если кешируется весь код, то это получается грузятся все свг в спрайте сразу?
типа там на 500кб, а мне оттуда надо взять по айди на 10кб картинку, он ведь не весь должен грузить сразу, а только её на 10кб?
источник

AE

Alex Elkin🇪🇸 in Верстка сайтов HTML/CSS/JS/PHP
Максим Кавецкий
а если кешируется весь код, то это получается грузятся все свг в спрайте сразу?
типа там на 500кб, а мне оттуда надо взять по айди на 10кб картинку, он ведь не весь должен грузить сразу, а только её на 10кб?
так он у тебя в самом конце штмл, после всего кода и начнет все это мотать уже после загрузки контента.
ну почитай уже что нибудь, если бы у меня было время и желания расписать текстом всю нюансы, - я бы написал статью.
там есть еще плагинчик который поключает этот фалй извне и через джс вставляет его в конец бади он тогда кешируется как отдельный файл еще лучше, но там будт доп код для старых браузеров и другие нюансы внешнего свг.
источник

✪zhuravlev66✪ in Верстка сайтов HTML/CSS/JS/PHP
кто пользовался https://animate.style/#documentation?
источник

МК

Максим Кавецкий... in Верстка сайтов HTML/CSS/JS/PHP
Alex Elkin🇪🇸
можно, НО он их по другому будет парсить, если это тэг имидж то он его будет подгружать как часть контента еще до стилей и прочего...
Слушай, люди много поколений оптимизировали процесс и пришли к свг спрайтам, ты можешь перебрать все остальные варианты или принять что бестпарктис называются так не по чьей то злой воле.
Найди хорошую статью про свг спрайты, там описаны все альтернативы и сказано чем лучше/хуже и какие есть варианты.
получается если юзать спрайт, то такая картинка не требует lazy-load?
источник

AE

Alex Elkin🇪🇸 in Верстка сайтов HTML/CSS/JS/PHP
Максим Кавецкий
получается если юзать спрайт, то такая картинка не требует lazy-load?
честно говоря никогда не думал про лейзи лоад в разрезе свг спрайтов...
ты понимаешь что давно нагуглил бы 10к бестпрактис по свг с разборами всех возможных вариантов, пока задаешь тут вопросы?
источник

МК

Максим Кавецкий... in Верстка сайтов HTML/CSS/JS/PHP
Alex Elkin🇪🇸
честно говоря никогда не думал про лейзи лоад в разрезе свг спрайтов...
ты понимаешь что давно нагуглил бы 10к бестпрактис по свг с разборами всех возможных вариантов, пока задаешь тут вопросы?
Ну я нагуглил эти методы и реализовал спрайты уже. А вот другие некоторые вопросы оставались и я их задавал)
источник

AE

Alex Elkin🇪🇸 in Верстка сайтов HTML/CSS/JS/PHP
я просто не готов тебе сходу ответить, что бы не вводить в заблуждение, а ггулить тоже сейчас нет времени и желания, помню когда разбирал эту тему, нашел в гугле несколько хороших статей на эту тему, с разбором как там и что кешируется, какие варианты лучше и почему этот самый используемый + набор полифильчиков и нпм пакетов. но это все конечно было не в оной какой то статье... Но я прям глубоко не гуглил, пара заходов оп первым страницам. Кажется что одна из них была на css-tricks но это не очно.

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

В

Владислава in Верстка сайтов HTML/CSS/JS/PHP
!rules
источник

C

Combot in Верстка сайтов HTML/CSS/JS/PHP
!rules  #rules #правила

Зашел - прочитал эти ПРАВИЛА - согласился (не согласился - вышел, или бан).
Не пиши мета вопросы и мета-приветы.
Подробнее: nometa.xyz и neprivet.ru (мета-сообщения будут удалены).
БАЗОВЫЕ ПРАВИЛА НАПИСАНИЯ ВАКАНСИЙ

Запрещенные действия:
❌ Оскорбление участников
❌ Реклама своих услуг
ℹ️ В том числе "дайте работу", "ищу работу", "могу сделать ... " и подобное
❌ Пиар групп, личных сайтов, форумов, и т.п.
❌ Упоминание ссылок на другие чаты, каналы, пересылаемые сообщения (forward)
ℹ️ Разрешенные каналы отмечены ниже
❌ Чрезмерное употребление стикеров
❌ Обсуждение политики, религии, национальностей и других подобных тем
❌ Игнорирование замечаний админов
❌ Мат
ℹ️ Уместен минимальный мат с цензурой (например замещение звездочками) и умеренный флуд около-IT тем
❌ Выкладывание огромных (более ~10 строк) кусков кода в чат
ℹ️ Для демонстрации кода используйте codepen.io, jsfiddle.net или любой другой подобный сервис
❌ Передачки (пересыл/"приветы") от забаненных
❌ Избыток троллинга, засорение чата флудом
ℹ️ Уместен минимальный троллинг и минимальный флуд около IT-темы

⚠️ Иные ситуации контролируются админами

За нарушение правил - БАН/РО или предупреждение, на усмотрение админов

✅ Группа Вк: vk.com/web_structure
✅ Верстка сайтов: @web_structure
✅ Веб Дизайн: @dev_design
✅ Freelancer: @web_fl
✅ Библиотека верстальщика: @weblibrary
✅ Автор: @M_Boroda@M_Boroda
источник

В

Владислава in Верстка сайтов HTML/CSS/JS/PHP
Люди добрые, подскажите, пожалуйста, второй день бьюсь. Какую форму и какие атрибуты использовать, чтобы сделать эти кнопки?
источник

A

Alex in Верстка сайтов HTML/CSS/JS/PHP
Владислава
Люди добрые, подскажите, пожалуйста, второй день бьюсь. Какую форму и какие атрибуты использовать, чтобы сделать эти кнопки?
А что именно не получается?
источник

GG

George GeS in Верстка сайтов HTML/CSS/JS/PHP
ребята, быть может тут сидят гении и смогут помочь понять, как называется скрипт и найти документацию, для реализации этих эффектов:
https://www.chiaraluzzana.com/about (нажмите на меню блок будет искажен, будто овальный)
https://www.martinehrlich.com/ (тот же самый эффект, при наведении на проект)
https://jesperlandberg.dev/ (тот же самый эффект при нажатии на проект)
кто шарит хоррошо в коде, пожалуйста посмотрите (я уже не раз пробовал, но я пока еще туповат в коде:)
буду вам невероятно признателен если поможете вытащить конкретный код, который нужно применить к любому дивблоку, чтобы он так искажался
источник