Gatsby: [v2] Дополнительная оболочка div

@reach / router добавляет его, чтобы он мог автоматически управлять фокусом, обеспечивая возможность использования сайтов программами чтения с экрана.

https://reach.tech/router/accessibility

Я понимаю, что это довольно глупо, но я думаю, что было бы предпочтительнее, если бы был только один оборачивающий div.

Кажется, что в div охвата нет ничего особенного, возможно, можно было бы объединить div охвата с оберткой id="___gatsby" div, добавив вместо этого атрибуты html?

К сожалению, их невозможно объединить. Возможно, вы могли бы поработать на них с @reach / router, повторно используя div, в котором смонтирован React.

Мне нужно добавить к нему height: 100% но на нем нет class или id . Я попытался найти его в приложении, но не нашел. Подскажите, как мне добавить к нему id ?

@colmtuite Это не идеально, но поскольку группа div является единственным дочерним элементом <div id="___gatsby"> , вы можете просто настроить таргетинг через

#___gatsby > * {
  height: 100%;
}

Обновление: немного лучшим решением может быть использование этого более конкретного селектора, предложенного здесь @ironblock .

div[role="group"][tabindex] {
  height: 100%;
}

Обновление 2 : еще в 2018 году это было не так, но в настоящее время рассматриваемый div имеет идентификатор gatsby-focus-wrapper . Таким образом, селектор может быть гораздо менее неясным:

#gatsby-focus-wrapper {
  height: 100%;
}

Соответствующая проблема: https://github.com/reach/router/issues/63

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

@kaishin Не могли бы вы

@janosh Я имел в виду решение специалистов по обслуживанию / маршрутизатору не предоставлять способ отключения или, по крайней мере, настройки этого div-оболочки. Я - большой сторонник семантического HTML, и меня беспокоит, что мне приходится иметь дело с еще одним div-оболочкой, который служит лишь зацепкой для библиотеки, о которой я едва знал, прежде чем столкнуться с этой проблемой.

Теперь я понимаю вашу точку зрения и полностью согласен. То же самое и с несемантической разметкой.
Я просто запутался в конце вашего комментария

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

поскольку я не понимаю, почему люди, которые _are_ используют styled-components , не пострадают.

Я не могу поверить, что эта проблема была закрыта таким необоснованным решением.

@ danielo515 Ну, проблема в зависимости, так что это несколько понятно.

Этот комментарий предлагает обходной путь CSS: https://github.com/reach/router/issues/63#issuecomment -428050999

поскольку я не понимаю, почему люди, использующие стилизованные компоненты, не пострадают.

@janosh С

@LekoArts Несемантическая разметка, которая нарушает решения CSS для сохранения нижнего колонтитула в нижней части окна даже при отсутствии достаточного содержимого. Использование styled-components и знание CSS-селектора обходного пути не делают оболочку div более семантической.

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

@colmtuite Рассмотрите возможность использования чего-то вроде height: 100vh;

@skinenbayev @colmtuite
Или с гибкостью,

div[role="group"][tabindex] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@Schmerb Я думаю, что установка 100vh для вашего выделенного класса css более удобный способ, чем манипуляции с некоторым сгенерированным кодом.

@skinenbayev
Думаю, мне следовало прояснить ... 100vh отлично, если вы хотите, чтобы ваше приложение имело фиксированную высоту того же размера, что и ваше окно просмотра ...

НО если вам нужно, чтобы приложение занимало все доступное пространство

(по сути, то, что пытается сделать каждый с height: 100% но, скорее всего, не работает из-за того, что родитель не имеет установленной высоты)

тогда на помощь приходит Flexbox .

Чтобы прояснить мой конкретный случай, скриншоты обеих попыток:
Синяя / оранжевая граница - это компонент /page . Случайный div-крючок, который помещает Гэтсби, - это белое пространство. С height: 100vh можно увидеть, что белое пространство простирается значительно ниже нижней части области просмотра ... отодвигая нижний колонтитул со страницы, даже если сама страница по существу не имеет содержимого.

Используя flex с переключенной главной осью ( flex-direction: column вместо flex-direction: row по умолчанию по умолчанию) и свойство flex-grow, вы можете увидеть, что он очень красиво занимает все доступное пространство.

с height: 100vh;

с display: flex; flex-direction: column; flex-grow: 1;

Все, что я вижу, - это обходные пути для проблемы, которой даже не должно быть.
Что делать, если ваш целевой браузер не поддерживает flexbox?

У меня также были проблемы с ошибкой при установке `height: 100vh ', где, когда требуется прокрутка, я получаю двойную полосу прокрутки в хроме.

Я решил подобную проблему вместо того, чтобы использовать height: 100vh; , а просто добавить min-height: 100vh; к моему компоненту Layout оболочки. Когда вы комбинируете это с чем-то вроде настройки:
grid-template-areas: 'Header' 'Content' 'Footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;

Теперь компонент оболочки всегда будет _ по крайней мере_ высотой порта просмотра, но если содержимое достаточно велико, чтобы требовать прокрутки, элемент нижнего колонтитула будет перемещен, чтобы оставаться в нижней части экрана.

Но (большое, но!), К сожалению, у grid меньше поддержки браузеров, чем у flexbox, но лично он кажется менее «хакерским».

Может быть, это не ответ, который поможет избежать поддержки гибкости, но, возможно, лучший способ заставить нижний колонтитул прилипать к нижней части страницы?

К сожалению, хотя рассматриваемая строка кода касается доступности, она также вызывает ошибку доступности. Я зарегистрировал проблему на https://github.com/reach/router/issues/257.

Имейте в виду, что 100vh может означать нечто иное для браузеров Android.
Быстрый поиск в Google показывает пример: https://stackoverflow.com/q/30148956

По какой-то причине div[role="group"][tabindex] не применяет никакого стиля к этому div. Пришлось указать id #gatsby-focus-wrapper

По-прежнему нет разумного решения проблемы высоты?