ReSQL.ru
     
powered by simpleCommunicator - 2.0.48     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Научите отлаживать чужой CSS
6 сообщений из 6, страница 1 из 1
Научите отлаживать чужой CSS
    #40045254
Никанор Кузьмич
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Никанор Кузьмич
Участник
Не то чтобы я совсем не умел. В большинстве случаев, когда мне надо, я добиваюсь нужного мне результата. Но иногда застреваю.
Пример страницы: https://apex.oracle.com/pls/apex/f?p=36508:1
Это Oracle APEX, фреймворк, сделанный бэкэндщиками для бэкэндщиков. Все тамошние CSS стили и прочая красота не документированы приблизительно никак, и 99% разрабов это и неинтересно. Гуглить бесполезно, сколько ни пробовал - никто про это даже не пытается писать.

Что интересует конкретно на этой странице: в меню вверху справа есть ссылки Menu item 1, Menu item 2, Menu item 3. Если сделать ширину страницы меньше 640 пикселей, то они пропадают. Но не совсем пропадают, если в браузере навести курсор на правый верхний угол, то там подсвечивается прямоугольник. Если плавно менять ширину окна, то видно, что до 640 пикселей меню просто ползет влево, а после перехода порога в 640 пикселей "прыгает" и "пропадает". Как я понимаю, там где-то есть такая штука:
Код: css
1.
2.
@media screen and (max-width: 640px) {
...


После которой описаны отличия в поведении для разных размеров экрана.
Вопрос: как до этого стиля добраться? У меня фаерфокс, но нет жестких предубеждений против других браузеров, если где-то можно проще - можно и там поотлаживать.
Идея была такая: посмотреть на какое-нибудь свойство, определяющее ширину, найти класс, который это свойство задает. Дальше, зная класс и как в общих чертах устроен фреймворк, решить проблему.
Вот нажал я правой кнопкой на пункте меню, выбрал "Исследовать элемент", посмотрел на дерево тэгов, посмотрел список "вычисленные свойства". Там тег span, снаружи от него a (ссылка), дальше li, дальше ul, дальше div и так далее. Прошел все дерево вверх. В явном виде ширина элементов нигде не задана. В вычисленных полях поля width тоже нет. Либо я смотрю не туда, либо смотрю туда, но не земечаю еще чего-то.
Куда еще можно посмотреть?
...
Рейтинг: 0 / 0
14.02.2021, 19:12
| Ответить | Цитировать | Написать  
Научите отлаживать чужой CSS
    #40045265
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Никанор Кузьмич
Вопрос: как до этого стиля добраться? У меня фаерфокс, но нет жестких предубеждений против других браузеров, если где-то можно проще - можно и там поотлаживать.
попробуй хром - там отладчик несколько другой - может будет нагляднее
а так - действия правильные.
...
Рейтинг: 0 / 0
14.02.2021, 19:42
| Ответить | Цитировать | Написать  
Научите отлаживать чужой CSS
    #40045266
Alexander A. Sak
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alexander A. Sak
Участник
В инспекторе видно, что вот это:
Код: html
1.
<span class="t-Button-label">Menu item 1</span>


при ширине меньше какой-то становится с display:none.

И видно, что это срабатывает для @media (max-width:640px)
Код: css
1.
2.
3.
.t-Button--navBar .t-Button-label {
    display: none;
}
...
Рейтинг: 0 / 0
14.02.2021, 19:46
| Ответить | Цитировать | Написать  
Научите отлаживать чужой CSS
    #40045274
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Агнец за бортом
Участник
Щелкаешь на кнопке там какой-нибудь - смотришь в инспекторе.

Смотришь в каких файлах вообще находятся стили.

Там их два вроде, Vita и Core.

Смотрим Core. Он минифицирован - форматируем.

5362 строчка

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
@media (max-width: 640px) {
    .t-Button--navBar .t-Button-badge {
        position:absolute;
        margin-left: 0;
        top: 4px;
        right: 4px;
        font-size: 10px;
        line-height: 1.4rem;
        padding: 0 .4rem
    }

    .t-Button--navBar .t-Button-label {
        display: none
    }

    .t-Button--navBar .a-Icon.icon-down-arrow {
        margin-right: -4px
    }
}
...
Рейтинг: 0 / 0
14.02.2021, 20:08
| Ответить | Цитировать | Написать  
Научите отлаживать чужой CSS
    #40045276
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Агнец за бортом
Участник
В APEX-е лазить в CCS-ах... Ну не знаю - нафига? Он и придуман был для тех, кто ничего не знает кроме SQL-запросов и знать не хочет.
...
Рейтинг: 0 / 0
14.02.2021, 20:10
| Ответить | Цитировать | Написать  
Научите отлаживать чужой CSS
    #40045291
Никанор Кузьмич
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Никанор Кузьмич
Участник
Alexander A. Sak,

Спасибо! Действительно, тут проблема. За display:none глаз как-то не зацепился.

Агнец за бортом
Ну не знаю - нафига?
Если я скажу - вы смеяться надо мной будете. Поэтому не скажу
...
Рейтинг: 0 / 0
14.02.2021, 21:15
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Научите отлаживать чужой CSS
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru             Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=5&tid=1443310]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 57ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 45ms
get tp. blocked users:
 2ms
others: 16ms
total:  164ms
созд. / загр.: 164ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]