• Почему тег «a href» при клике на него не работает?

    Очуметь, и вправду - слепая область в пару пикселей. Немного поигравшись с примером пришел к выводу, что проблема в следующем:
    - перед кликом, в слепой области, курсор находится над `а` (но не над текстом! `padding`)
    - во время клика кнопка уходит вниз (`:active `) и курсор наезжает на текст
    - и клик не отрабатывает, потому что нажатие началось над `а`, закончилось над текстом.

    Такой же эффект, если мы при `:active` сдвигаем кнопку через `relative/top` а не через `margin`. codepen. Заметьте, что слепая область при `top:8` увеличилась на 8px.

    Лечим через pointer-events codepen

    Но мне кажется, что такое поведение заслуживает баг репорта, или кто-то имеет больше информации по этому поводу?
    Ответ написан
    1 комментарий
  • Актуальны ли технологии AJAX и JQUERY при нынешних веб реалиях?

    @unreal_serg
    Jquery вполне актуален для дешевых проектов до 100к рублей примерно. Middle разработчик на React, Vue, Angular стоит тысяч 150 в месяц, в то время как специалист, знающий Jquery стоит чуть ли не в два раза дешевле, отсюда и актуальность Jquery.
    Jquery гораздо проще всех вышеперечисленных библиотек/фреймворков. Накидать на нем слайдер, счетчик и прочие мелкие модули для мелких сайтов - 5 минут, не говоря уже о бесчисленном множестве готовых решений. В то время как, намутить "клик вне элемента" на Vue3 CLI для компонента в списке будет тот еще гемор. В то время как на Jquery навесил слушатель по классу, сделал проверку и не паришься!
    Поэтому вывод: для более менее продвинутых приложений типа SPA, CRM, админка и пр. - актуальнее всего использовать прогрессивные фремворки. Для дешевых сайтов - смело бери Jquery, вероятность ошибиться будет минимальная. Особенно если ты бэкендер и знания фронта посредственные. И жадный заказчик тебе спасибо скажет (наверное).
    А все эти "Jquery не нужен" - детские понты среди программистов аля "я пишу на Vue, jquery - кал", "Я пишу на Java, PHP - кал", "Я пишу на C, Java - кал" и т.д.
    Ajax - это термин, означающий отправку асинхронных запросов. На сегодняшний день актуально использовать fetch в нативном JS/
    Ответ написан
    2 комментария
  • Ответьте пж где учить CSS (учусь сам дома, не советуйте кого то на подобие Хауди хо)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    https://developer.mozilla.org/ru/docs/Learn/CSS
    https://web.dev/learn/css/
    htmlbook.ru/samcss
    Леа Веру - секреты css
    Дэвид Макфарланд - Новая большая книга css

    https://htmlacademy.ru/courses
    Ну и конечно же самостоятельная практика.
    Ответ написан
    1 комментарий
  • Работает ли SCSS, SASS во всех браузерах(втч. мобильных)?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    В браузере работает только CSS. Всё остальное требует препроцессоров на сервере.
    Ответ написан
    1 комментарий
  • Почему жирность текста в css отличается от жирности текста в макете figma?

    Liatano
    @Liatano
    Для изменения жирности нужно подгрузить шрифт с этой жирностью. Браузер сам, конечно, может некоторым образом симулировать жирность или курсив, но если шрифт не системный для каждой жирности, начертания и их сочетаний нужно подгружать свои файлы. При этом их нужно еще корректно объявлять, например:
    @font-face {
    	font-family: 'Commissioner';
    	src: url('fonts/Commissioner/Commissioner-Regular.eot');
    	src: local('Commissioner Regular'), local('Commissioner-Regular'),
    		url('fonts/Commissioner/Commissioner-Regular.eot?#iefix') format('embedded-opentype'),
    		url('fonts/Commissioner/Commissioner-Regular.woff2') format('woff2'),
    		url('fonts/Commissioner/Commissioner-Regular.woff') format('woff'),
    		url('fonts/Commissioner/Commissioner-Regular.ttf') format('truetype');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'Commissioner';
    	src: url('fonts/Commissioner/Commissioner-Medium.eot');
    	src: local('Commissioner Medium'), local('Commissioner-Medium'),
    		url('fonts/Commissioner/Commissioner-Medium.eot?#iefix') format('embedded-opentype'),
    		url('fonts/Commissioner/Commissioner-Medium.woff2') format('woff2'),
    		url('fonts/Commissioner/Commissioner-Medium.woff') format('woff'),
    		url('fonts/Commissioner/Commissioner-Medium.ttf') format('truetype');
    	font-weight: 500;
    	font-style: normal;
    }

    имя у шрифта одно, а вот жирность разная. При этом лучше не забывать о разных браузерах а также о том,что шрифты могут быть в системе пользователя(в этом случае ничего грузиться не будет). В целом, формат .eot - это атавизм для IE, но до сих пор лежит в готовых паках до кучи.
    Ответ написан
    1 комментарий
  • Почему жирность текста в css отличается от жирности текста в макете figma?

    @wonderingpeanut
    Жирность ставится не в пикселях, а числом, либо ключевым словом.
    Если жирность выставлена правильными единицами, но все равно не соответствует макету, скорее всего не подгружен шрифт.
    Ответ написан
    1 комментарий
  • Почему жирность текста в css отличается от жирности текста в макете figma?

    imko
    @imko
    Senior Scratch Developer
    Подключить нужную гарнитуру шрифта
    Ответ написан
    Комментировать
  • Оцените верстку HTML / CSS, стоит ли переходить на изучение JS?

    RAFAILgaley
    @RAFAILgaley
    я открою тебе ужасную правду -

    можно программировать на js без верстки

    например сервер или микроконтроллер
    Ответ написан
    Комментировать
  • WordPress при переносе сайта с Open Server исчесли все настройки темы?

    gromel
    @gromel
    SEO | VDS | WP | BITRIX
    Быстрый вариант — использовать WordPress Migration Plugin.
    Plugin Duplicator
    Создаете архив.
    В папку сайта загружаете архив и файл ****_installer.php
    Открываете в браузере ссылку на файл инсталятора.
    Указываете: База-Пользователь-Пароль, от базы, которая уже на хостинге.
    Какие нюансы? Файл wp-config.php при установки переименовать/удалить. Потом вернуть и проверить данные База-Пользователь-Пароль.
    Ответ написан
    Комментировать
  • Стоит ли учить html, css,js в 2021?

    approximate_solution
    @approximate_solution
    JS Developer. Angular\React\Vue\Ember
    Просто актуальной инфы так мало по этому, а я вылез из 2015 года.

    У вас странные вопросы. HTML + CSS + JS это костяк всего веба который в принципе не заменим.

    Логически построим цепочку. Есть бизнес разного уровня - ИП, средний бизнес, интерпрайз.

    Wordpress Elementor и его аналоги, подходят для конкретной задачи - быстрое прототипирование интерфейса и запуск бизнеса в кратчайшие сроки. Пример: сегодня 1 марта, и до 8 марта вам нужно быстро запустить лендинг или магазин на шаблоне wp, что бы реализовать продажу цветов. Всё.

    Если же ваш бизнес уровня средний и выше среднего, вы не сможете насколько хорошо оптимизировать, масштабировать свой проект, что бы он покрывал все запросы. В этом случае на помощь уже приходят специалисты уровня "фронтендер + бэкэндер + тимлид + PM" и каждый решают свою задачу.

    Задача фронтендера - отлично знать HTML + CSS + JS + (React\Vue\Angular) + REST API + WebSocket + сборщики + препроцессоры + figma + performance + assesability - и да, всё это требования джуна.

    Умение грамотно строить скелет приложения не накинув лишних вложенностей + грамотно проектируя интерфейс компонентами - добавляет вам денег и профита в конце пути. Джуна без знаний html\css в принципе на работу не возьмут.
    Ответ написан
    1 комментарий
  • Как влиться в современную CSS версту?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Да, я уже вижу, как минут кинут ссылку на документацию по CSS3, но в том и дело, что мои знания очень обрывисты


    Ну так структурируйте свои знания. Хотя бы отсюда начните https://developer.mozilla.org/ru/docs/Learn/CSS

    Однако, это даст вам только знание инструмента, т.е. языка (языков). Методики верстки, типовые кейсы нарабатываются опытом. Разумеется есть какие-то книги. Может некоторые даже не плохи. Но они быстро устаревают.
    Тут как уже отметили путь один – мониторить интернет. Сайты типа css-triks (en) и css-live (ru), тот же хабр и прочие. Также есть отличный банк готовых решений – https://codepen.io – подпишитесь на рассылку интересностей.
    Ну и практика, практика, практика.
    Ответ написан
    Комментировать
  • Как изящно сделать border не во всю длинну?

    @Lorelin
    Student web
    Градиентом, от белого к рыжему
    Ответ написан
    Комментировать
  • Как сделать чтоб бордер кнопки горел только несколько секунд?

    YavaDev
    @YavaDev
    Ответ написан
    Комментировать
  • Как изменить расположение элементов WooCommerce в WordPress?

    Punkie
    @Punkie
    В папке плагина woocommerce есть файл со всеми хуками - woocommerce_hooks.php . Находите в нем отрезок, который отвечает за нужный вам кусок шаблона (в вашем случае woocommerce_single_product_summary), смотрите вызовы add_action.
    У вас они будут как раз такие, как закоментировано в коде выше, то есть:
    @hooked woocommerce_template_single_title - 5
                 * @hooked woocommerce_template_single_price - 10
                 * @hooked woocommerce_template_single_excerpt - 20
                 * @hooked woocommerce_template_single_add_to_cart - 30
                 * @hooked woocommerce_template_single_meta - 40
                 * @hooked woocommerce_template_single_sharing - 50


    В данном случае числа - это последовательность (приоритет) активации action'ов.
    Теперь вам нужно в functions.php вашей темы деактивировать эти action'ы методом remove_action и выполнить их активацию в нужном вам порядке.
    Например, вам нужно, чтобы сначала выводилось название товара, затем краткое описание, затем цена и тд.
    Код будет примерно такой:
    *тут перечисляем все строки с методом remove_action:
    
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
    ... и т.д.
    
    *Теперь вызываем те же действия по хуку woocommerce_single_product_summary, но в нужной нам последовательности:
    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 10);
    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 15);
    ... и т.д.

    Числовой приоритет вызова обычно делают кратным 5 для того, чтобы можно было потом еще что нибудь впихнуть между вызовами. Например, захотите потом добавить вывод ключевых слов или уникального поля товара между названием и кратким описанием. Тогда приоритет вызова можно будет сделать 6-9 без необходимости заново перебирать весь массив вызова хука.

    Подробнее про понятия hook, action и filter читайте в официальном руководстве: Introduction to hooks: actions and filters
    Ответ написан
    7 комментариев
  • Почему начертание шрифта подключенного к странице расходится с макетом в PSD?

    melodyn
    @melodyn
    Лучше нативная смерть, чем фреймворковая жизнь.
    В Фотошопе есть настройка сглаживания шрифта: резкое, плавное, насыщенное, ЖКД Windows. Также есть возможность отключить сглаживание, что меняет шрифт, иногда, до неузнаваемости. Собственно, большинство шрифтов в вебе отображаются без сглаживания, что ты и наблюдаешь в своём случае.

    Имитировать сглаживание можно в CSS через text-shadow, задавая в цвет текста тень через rgba, но именно нормального дефолтного инструмента сглаживания на программном уровне мне не известно. Поэтому выбор другого шрифта может иметь место, как поиск решения, но про пиратский шрифт - это, видимо, анекдот какой-то.

    Кстати, подобные явления можно наблюдать не только на шрифтах, но и на скруглённых краях, которые в вебе могут выглядеть куда лучше, чем в Фотошопе. Это одна из причин по которой SVG-иконки предпочтительнее, ведь программно они подстраиваются под плотность пикселей и дают, преимущественно, лучший результат.
    Ответ написан
    Комментировать
  • Зачем нужен HTML если есть WordPress?

    Stalker_RED
    @Stalker_RED
    Представим вместо вас новичка автомеханика:

    Зачем нужно учить болты, гайки и провода, если это все уже есть в жигулях? Я понимаю, что это люди непросто так все это и многое другое изучают, но не могу понять зачем, если хороший автомобиль с колесами можно сделать из жигулей. Или это все-таки будет не очень хороший автомобиль?

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

    Посмотри на яндекс-маркет или на гуглокарты. Посмотри на вконтактик или на тостер, на котором ты этот вопрос задал. Сможешь повторить это на вордпрессе? Вот затем и учат, чтобы уметь делать что-то отличающееся от блогов на вордпрессе.
    Ответ написан
    2 комментария
  • В чем отличие верстки под CMS (Wordpress/Joomla) от обычной верстки?

    viktorvsk
    @viktorvsk
    Когда кто-то пишет "верстка под ХХХ", то он просто хочет сбить цену.
    Есть прототип\концепт (над ним могут работать копирайтер, специалист по контекстной стратегии, информационные архтектор\дизайнер и т.д и т.п.)
    Есть дизайн, над ним работает дизайнер, художник, графический дизайнер
    Есть верстка, над ней работает верстальщик, который в простом случае верстает с картинки то, что видит, в сложном - он умеет не только jquery плагины подключать (хотя, иногда и не умеет и это, по сути, нормально), но и делать более сложные client-side штуки
    Есть программирование: в простом случае это установить цмс, скачать шаблоны\плагины, настроить. В сложном - взять цмс\магазин и скорректировать необходимый функционал\написать нужные плагины. Ну, или просто взять фреймворк и разработать проект.

    А есть такой момент, как натягивание. Когда дизайнер нарисовал по прототипу дизайн, программисты сделали проект и как-то надо свести концы с концами. И этим должен заниматься отдельный человек. Он может быть верстальщиком, которому придется разобраться в проекте, или программистом, которому придется разобраться в верстке.

    Каждый должен выполнять свою функцию. А если какие-то функции складываются, в этом, конечно, ничего такого нет, но по крайней мере каждая сторона должна понимать, кто какие функции выполняет и почему.

    Вывод: не ведитесь просто так на "верстка под ХХХ", делайте хорошую верстку, а после уже отдельно договаривайтесь про натягивание. К сожалению, натягивание часто - это непредсказуемый процесс, т.к. проект может быть написан очень по-разному (как, например, подразумеваю, и тема на вордпрессе\джумле может быть сделала хорошо, понятно, по стандартам, а может быть - и через одно место)
    Ответ написан
    Комментировать
  • Как сделать так чтобы пункты меню выпадали поверх контента?

    f3d0t
    @f3d0t
    Они и так поверх, просто с прозрачным фоном =)) нужно добавить:
    .dropdown {
        background: #fff;
    }
    Ответ написан
    1 комментарий
  • В каких моментах нужен min-height/width?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    К примеру у вас есть какой-нибудь список с красивыми ссылками одинаковой высоты, но текст в ней может быть и в одну и в 2 строки, если мы для отступов применим только padding, то может получится вот так:

    Но если мы сделаем минимальную высоту и уменьшим padding, то у нас не измениться размер, а текст красиво впишется в размеры:


    Мелочь, а приятно.
    Ответ написан
    3 комментария