Gatsby: [v2] غلاف div إضافي

يضيفها @ access / router حتى يتمكن من إدارة التركيز تلقائيًا كجزء من التأكد من أن المواقع قابلة للاستخدام بواسطة برامج قراءة الشاشة.

https://reach.tech/router/accessibility

أدرك أن هذا سخيف للغاية لكنني أعتقد أنه سيكون من الأفضل إذا كان هناك غلاف واحد div.

لا يبدو أن هناك شيئًا مميزًا حول مدى الوصول div ، فهل يمكن دمج مدى الوصول div مع التفاف id="___gatsby" div بإضافة سمات html هناك بدلاً من ذلك؟

للأسف لا يمكن دمج الاثنين. ربما يمكنك العمل معeach / 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 قصدت قرار

أنا أفهم وجهة نظرك الآن وأوافق تماما. أشعر بالشيء نفسه تجاه الترميز غير الدلالي.
لقد كنت في حيرة من أمري بنهاية تعليقك

... مصدر مشكلات لأولئك الذين لا يستخدمون مكونات ذات نمط

لأنني لا أرى لماذا الأشخاص الذين _are_ يستخدمون styled-components لن يتأثروا.

لا أصدق أنه تم إغلاق هذه المشكلة بحل غير معقول.

@ danielo515 حسنًا ، المشكلة تتعلق بالتبعية ، لذا فهي مفهومة إلى حد ما.

يقدم هذا التعليق حل CSS: https://github.com/reach/router/issues/63#issuecomment -428050999

لأنني لا أرى سبب عدم تأثر الأشخاص الذين يستخدمون المكونات المصممة.

janosh منذ أن فتحت هذا العدد لم أواجه أي مشاكل على الإطلاق في التصميم. إذن ما هي المشكلة هنا في الواقع؟

LekoArts ترميز غير دقيق يكسر حلول CSS لإبقاء التذييل في أسفل النافذة حتى في حالة عدم وجود محتوى كافٍ. لا يؤدي استخدام styled-components ومعرفة حل بديل لمحدد CSS إلى جعل الغلاف div أكثر دلاليًا.

في الأصل ، عندما تنقر في مكان ما على الجسم ثم تضغط على علامة التبويب ، فإنها ستركز على أقرب عنصر يمكن التركيز عليه. ومع ذلك ، يعني هذا الغلاف أن النقر على الجسم سيركز الغلاف ، ويعيد ترتيب ترتيب علامات التبويب إلى البداية بدلاً من قرب العنصر. لست متأكدًا مما إذا كانت هذه مشكلة تتعلق بإمكانية الوصول ولكنها شيء لاحظته عند محاولة النقر بالقرب من عنصر ثم الضغط على مفتاح تركيزه.

colmtuite النظر في استخدام شيء مثل الطول: 100vh.

تضمين التغريدة
أو مع فليكس ،

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

Schmerb أعتقد أن تعيين 100vh إلى فئة css المخصصة هي طريقة أكثر ملاءمة من التلاعب ببعض التعليمات البرمجية التي تم إنشاؤها.

تضمين التغريدة
أعتقد أنه كان يجب أن أوضح ... 100vh رائع إذا كنت تريد أن يكون لتطبيقك ارتفاع ثابت بنفس حجم منفذ العرض ...

ولكن إذا كنت بحاجة إلى أن يشغل التطبيق كل المساحة المتاحة

(بشكل أساسي ما يحاول كل شخص لديه height: 100% ولكن من المرجح أن يفشل بسبب عدم وجود ارتفاع محدد للوالد)

ثم Flexbox للإنقاذ.

لمزيد من التوضيح لحالتي المحددة ، لقطات شاشة لكلتا المحاولتين:
الحد الأزرق / البرتقالي هو مكون /page . عنصر "الخطاف" العشوائي الذي يضعه غاتسبي هو المساحة البيضاء. باستخدام height: 100vh ، يمكن رؤية المساحة البيضاء ممتدة أسفل أسفل إطار العرض ... دفع التذييل بعيدًا عن الصفحة على الرغم من أن الصفحة نفسها لا تحتوي بشكل أساسي على محتوى.

باستخدام flex مع تبديل محوره الرئيسي ( flex-direction: column بدلاً من flex-direction: row الافتراضي) وخاصية النمو المرن ، يمكنك أن ترى أنها تشغل كل المساحة المتاحة بشكل جيد.

بـ height: 100vh;

بـ display: flex; flex-direction: column; flex-grow: 1;

كل ما أراه هو حلول لمشكلة لا ينبغي حتى أن توجد.
ماذا لو كان متصفحك المستهدف لا يدعم flexbox؟

لقد واجهت مشكلات أيضًا مع خطأ عند تعيين "الارتفاع: 100vh" حيث يكون التمرير مطلوبًا ، أحصل على شريط تمرير مزدوج في الكروم.

الطريقة التي حللت بها مشكلة مماثلة هي بدلاً من استخدام height: 100vh; ، هي إضافة min-height: 100vh; إلى مكوّن التغليف Layout . عندما تدمج ذلك مع شيء مثل الإعداد:
grid-template-areas: 'Header' 'Content' 'Footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;

الآن ، سيكون مكون الالتفاف دائمًا _ على الأقل_ ارتفاع منفذ العرض ، ولكن إذا كان المحتوى كبيرًا بما يكفي لتتطلب التمرير ، فسيتم دفع عنصر التذييل للبقاء في أسفل الشاشة.

لكن (كبيرة ولكن!) للأسف ، تتمتع الشبكة بدعم أقل للمتصفح من flexbox ، لكنها تبدو أقل "اختراقًا" شخصيًا.

ربما لا تكون إجابة للمساعدة في عدم وجود دعم مرن ، ولكن ربما تكون طريقة أكثر إتقانًا للحصول على تذييل للالتزام بأسفل الصفحة؟

لسوء الحظ ، بينما يتناول سطر الكود المعني إمكانية الوصول ، فإنه يتسبب أيضًا في حدوث خطأ في الوصول. لقد سجلت مشكلة في https://github.com/reach/router/issues/257.

اعلم أن 100vh قد يعني شيئًا مختلفًا عن متصفحات Android.
تكشف ميزة googling السريعة عن مثال: https://stackoverflow.com/q/30148956

لسبب ما ، لا يطبق div[role="group"][tabindex] أي نمط على div. اضطررت إلى تحديد المعرف #gatsby-focus-wrapper

لا يزال لا يوجد حل معقول لمشكلة الارتفاع؟