Ответы пользователя по тегу CSS
  • Почему не работает стиль?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Font-stretch: condenced не поддерживается вроде ни одним браузером. Ну и имя шрифта надо указать по хорошему.
    Ответ написан
  • Что плохого в каскадности?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Оба подхода имеют право на существование. Каскадность "плоха" тем, что она немного замедляет парсинг страницы браузером, а также порой бывает избыточна. Лучше всего ее применять например в больших списках и таблицах, когда проще написать одну конструкцию типа ul > li , чем каждому элементу списка присваивать дополнительный класс, особенно если их там много и они должны быть однородными.
    С другой стороны, не БЭМом единым жив верстальщик. Есть другие методологии, которые содержат в себе здравые мысли. Можно скомпилировать свой собственный подход, используя лучшее из всех методологий, а можно придерживаться БЭМа, чтобы при работе в команде ваш код был понятен остальным участникам проекта, или например другому человеку, который будет работать над проектом после вас, ибо БЭМ сейчас самый распространенный подход по моему. Но я лично сторонник смеси принципов БЭМа с вкраплениями atomicCSS.
    Ответ написан
    Комментировать
  • Позиционирование должно идти по видимой области браузера(position: absolute)?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    У вас ошибка в определении. Абсолютно-позиционированный элемент размещается относительно ближайшего предка с позиционированием, отличным от static.
    А вот фиксированное позиционирование оно уже задается относительно окна браузера.
    Ответ написан
    Комментировать
  • Разбор различных элементов на разных сайтах?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Найдите в сети css фремворк несложный. Смотрите элементы, который он предлагает и смотрите в файлах стилей как они реализованы. Как вариант есть сайт w3school и там в разделе HowTo рассматриваются примеры создания всяких менюшек, слайдеров, кнопочек, вот это вот все )
    Ответ написан
    Комментировать
  • Как вы выравниваете текст внутри кнопки?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Не указывай height
    Сделай паддинг вокруг текста равномерный и будет этот текст по середине
    Ответ написан
    4 комментария
  • Как сверстать квадратный див с размерами min(15vh, 12.5vw)?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Сверстать можно, но при условии, что у вас монитор с соотношением сторон 15:12,5)
    Ответ написан
    Комментировать
  • Как сделать такой блок на css?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    В угол можно положить квадрат, у которого один коай будет иметь прозрачный бэкграунд, а другой край будет нужного нам цвета. Квадрат создается по принципу треугольников из контента шириной 0 и бордера нужного размера.
    Ответ написан
  • Как реализовать такую штуку?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Есть способ, но треуголка будет с прямым углом
    https://jsfiddle.net/b5sxLLwa/
    Думаю все эти вещи лучше реализовывать с картинками, если надо прям именно так сделать обязательно.
    Создаете картинку с прозрачным фоном на которой нарисован этот кружок PLAY внутри рваного бордера и сконвертировав ее в base64 накладываете через background-image в тот блок с текстом. И аналогично с треуголкой.
    Откуда вообще этот дизайн взялся?
    Это макет или есть живой сайт такой?
    Если макет, то надо у дизайнера узнать, как он ожидал что это будут переносить в верстку, когда рисовал свой изврат)
    Ответ написан
  • Нужно ли поддерживать Internet Explorer 8 и ниже при верстке?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Я когда то давно считал, что программирование это креатив и новаторство, пока не столкнулся с объективной реальностью )

    Работая на компанию, рядовой программист превращается в оператора печатной машинки, где за него уже решили что и как он должен писать, а ему остается только соблюдать методологию и успеть все сдать до дедлайна в ущерб своему личному времени.

    Поддержка древних браузеров это оружие в руках менеджеров-продажников, которым они завоевывают новых клиентов. Шепчут им сладким голосом мантры про то, что есть 2 процента людей, которые живут в каменном веке и если вы не сделаете их счастливыми, то ваш сайт недополучит эти 2 процента прибыли. Клиенты разумеется прикидывают, что 2 процента это 2 процента и соглашаются переплачивать за такую работу, рассчитывая что эти затраты в итоге окупятся. Это называется разделение ответственности, о котором в свое время писал Ф. Ницше. Менеджер продает услугу, которую он сам не будет производить, а следовательно он не будет сидеть и ломать голову над ее реализацией.

    Хорошо если разработчику будут доплачивать за такие клиентские прихоти, тогда это еще хоть как то будет оправдано, но в ином случае, если программист в организации сидит на окладе, то на его плечи тяжким бременем опустятся все хотелки клиентов, начиная от pixel perfect в резиновом дизайне и заканчивая разметкой scheme в каждом теге.

    Такой подход к работе требует от программиста быть постоянно на пределе. Он становится роботом, который все свое личное время тратит на изучение различных техник оптимизации кода или освоение новых фреймворков, которые внедряются руководством в процесс, после посещения ими очередного модного семинара. Scrum, Agile, TDD и прочие инновации отнимают у рядовых разработчиков самое важное - полноценную жизнь свободного человека.
    Он превращается в придаточный орган корпоративного организма, который способен лишь выполнять одну функцию - писать код. Узкие специалисты перестают понимать внутреннюю жизнь представителей других профессий, а личность должна стремиться к разностороннему развитию, ибо только цельному человеку доступна цельная (читай полноценная) жизнь.
    Человек должен иметь право на досуг и развлечения, и это право он отстоял в революциях 19-20 веков.
    PS
    Я периодически встречаю в сети советы молодым разработчикам, что они должны забросить все свои увлечения и писать сутками код, иначе они не будут востребованы рынком. Это суровая действительность, однако я надеюсь что когда нибудь добро победит бабло и справедливость восторжествует ))
    PPS
    Немного не в тему топика, но мысль настойчиво требовала изложить себя на "бумаге" ))
    Ответ написан
    1 комментарий
  • Как побороть замыленность и дрожание блоков при анимации CSS3?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Там проблема в том, что при 3d анимации браузер начинает задействовать gpu. От этого происходит дерганье. Чтобы этого избежать, надо заранее применить к этому элементу трансформацию, чтобы при загрузке страницы он уже был отрендерен через gpu и этот переход не происходил во время начала анимации и конца. Можно сделать это например через свойство transform: translateZ(0); которое должно стоять у элемента, который мы собираемся трансформировать в будущем.
    Ответ написан
    5 комментариев
  • @extend в SASS. Когда пора остановиться - 2?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Все это конечно хорошо, но только надо учесть несколько моментов. Во первых, при использовании extend наши правила при трансляции в css будут записываться в тот селектор, который мы расширяем, а не в то место, где мы его пишем в scss файле, что может вызвать некоторые проблемы. Например мы хотим переопределить цвет элемента и если сделать это через extend, то есть вероятность что ничего не получится, так как правила extend находятся обычно в начале кода, а остальные правила следуют уже дальше, и если у нас гдето есть селектор, который задает цвет нашему элементу, то сначала применятся правила из extend, а потом снова то значение цвета, что определено далее по коду. Тут надо хорошо проектировать, чтобы случайно не запутаться в этих правилах и чтобы одно не переопределяло другое.
    Во вторых, надо помнить о том, что extend не работает внутри медиа запросов, так как там другая область видимости, так что придется либо дублировать все миксинами, либо просто писать обычный css код внутри медиазапросов.
    Ответ написан
    Комментировать
  • Как лучше сделать погрузку картинок в лейдинге?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    10 секунд долго.
    Можно загружать сразу после загрузки страницы думаю.
    Посмотрите в гугле по запросу defer images with js, либо по русски - отложенная загрузка картинок с помощью js. Если не разберетесь позже напишу код, либо к тому времени уже напишет кто то здесь.
    Ответ написан
    3 комментария
  • Как вычислить приоритет каскадности и почему происходит именно так?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Присвойте класс article одному из параграфов.
    У вас сейчас красный цвет наследуется параграфами но потом переопределяется на зеленый.
    Ответ написан
    Комментировать
  • Как вывести определенную часть картинки не используя ФОН?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Background-size: cover поможет, но будет не точно как требуется, а приблизительно середина всей картинки подогнанная под требуемый размер (типа кадрирования по центру)
    Ответ написан
  • Задержка при нажатии кнопок формы на мобильных браузерах?

    pm_wanderer
    @pm_wanderer Автор вопроса
    junior-HTML
    И еще ontouchstart не совсем корректно использовать по моему. Это событие генерируется всегда, когда юзер просто касается экрана. Видимо придется забить и просто ждать когда починят, придерживаясь graceful degradation.
    Ответ написан
    Комментировать
  • Можно ли скрыть стилем заголовок h1 только ради верного построения семантической верстки?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    И помимо того что в этом нет смысла, робот гугла может заподозрить вас в cloacking-e
    Ответ написан
    Комментировать
  • Кто может посоветовать хорошие книги по верстке?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    69aada1f9998403aa1c26559d3a7e056.jpeg
    Ответ написан
    Комментировать
  • Как оптимизировать анимацию на сайте?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Попробуй вот так внутри кейфреймс:
    0% {transform: translateZ(0) translateY(0);}
    50% {transform: translateZ(0) translateY(-5px);}
    100% {transform: translateZ(0) translateY(0);}
    Ответ написан
    Комментировать