<ফিল্ডসেট> ফ্লেক্স পাত্রে কেন হতে পারে না?

Question

আমি এবং fieldsetসাথে একটি উপাদান স্টাইল করার চেষ্টা করেছি ।display: flexdisplay: inline-flex

যাইহোক, এটি কাজ করে না: flexমত আচরণ blockএবং inline-flexমত আচরণ করে inline-block।

এটি ফায়ারফক্স এবং ক্রোম উভয় ক্ষেত্রেই ঘটে তবে আশ্চর্যের বিষয় এটি আইই তে কাজ করে।

এটা কি বাগ? এইচটিএমএল 5 বা সিএসএস ফ্লেক্সিবল বক্স লেআউট স্পেকসগুলিতেও এর fieldsetকোনও বিশেষ আচরণ হওয়া উচিত আমি পাইনি ।

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

Comments

হ্যাঁ, এটি একটি বাগ। সাধারণ ফিক্স: অন্য উপাদান ব্যবহার করুন। কোড.google.com/p/chromium/issues/detail?id=262679

— অ্যাডাম

অনুরূপ ইস্যু: ফ্লেক্সবক্স কিছু ব্রাউজারে <বাটন> উপাদানটিতে কাজ করছে না

— ওরিওল

Answer 1

বাগ 984869display: flex অনুসারে - বোতামের উপাদানগুলির জন্য কাজ করে না ,

<button>খাঁটি সিএসএসে (ব্রাউজারগুলির মাধ্যমে) প্রয়োগযোগ্য নয়, তাই সিএসএসের দৃষ্টিকোণ থেকে তারা কিছুটা কালো বক্স box এর অর্থ হল যে তারা অগত্যা একইভাবে প্রতিক্রিয়া দেখায় না যেমন উদাহরণস্বরূপ <div>would

এটি ফ্লেক্সবক্সের সাথে নির্দিষ্ট নয় - যেমন আপনি overflow:scrollকোনও বোতাম চাপলে আমরা স্ক্রোলবারগুলি রেন্ডার করি না এবং আপনি যদি এটি রাখেন তবে আমরা এটি টেবিল হিসাবে রেন্ডার করি না display:table।

আরও পিছনে পা বাড়ানো, এটি নির্দিষ্ট নয় <button>। বিবেচনা <fieldset> এবং <table> যার বিশেষ রেন্ডারিং আচরণ রয়েছে:

data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>

এই ক্ষেত্রে, ক্রোম আমাদের সাথে সম্মত হয় এবং flex প্রদর্শন মোড উপেক্ষা করে । (যেমনটি "abc" এবং "ডিএফ" উল্লম্বভাবে স্ট্যাক করা শেষ করে) আপনি যেটা প্রত্যাশা করছেন তা তারা ঘটায় তা <button style="display:flex">বাস্তবায়ন বিশ্লেষণের কারণে সম্ভবত ঘটে।

গেকোর বোতাম প্রয়োগের ক্ষেত্রে আমরা হার্ডকোড <button>(এবং <fieldset>,এবং <table>) displayসম্পত্তি নির্বিশেষে একটি নির্দিষ্ট ফ্রেম শ্রেণি (এবং তাই, শিশু উপাদানগুলি ছড়িয়ে দেওয়ার একটি নির্দিষ্ট উপায়) হিসাবে রয়েছে ।

আপনি যদি ক্রস ব্রাউজারের ফ্যাশনগুলিতে বাচ্চাদের নির্ভরযোগ্যভাবে একটি নির্দিষ্ট লেআউট মোডে নির্ভরযোগ্যভাবে সাজিয়ে রাখতে চান তবে আপনার সেরা বেটটি বোতামের অভ্যন্তরে একটি মোড়ক-ডিভ ব্যবহার করা উচিত, যেমন আপনার অভ্যন্তরের ভিতরে প্রয়োজন a <table>বাক <fieldset>।

অতএব, এই বাগটিকে "সমাধান করা অবৈধ" হিসাবে চিহ্নিত করা হয়েছিল।

এছাড়াও বাগ 1047590 রয়েছে -display: flex; কাজ করে না<fieldset> , বর্তমানে "অসমর্থিত"।

---

সুসংবাদ : ফায়ারফক্স 46+ এর জন্য ফ্লেক্সবক্স প্রয়োগ করে <fieldset>। বাগ 1230207 দেখুন ।

Comments

ফ্লেক্সবক্সটি বিবেচনা করে এখন আট বছর ধরে অচল হয়ে পড়েছে, আমি "অসাধারণ" কিছুটা ওভারস্টেটমেন্ট পেয়েছি। যদি কিছু হয় তবে আমি অবাক হয়েছি তারা এতো তাড়াতাড়ি ফায়ারফক্সে কাজ করেছে। হতে পারে আপনি গুগলে জিনিসগুলিকে গিয়ারে লাথি মারতে সহায়তা করতে চান (হ্যাঁ, এটি পেয়েছেন ?)

— বোল্টক্লক

<button> is not implementable (by browsers) in pure CSS- এটা ঠিক ভুল। ব্রাউজার <button>তারা চাইলে প্রয়োগ করতে পারে, তারা সিস্টেম উইজেট লাইব্রেরি বা যে কোনও কিছু ব্যবহার করে এটি রেন্ডার করতে "চুক্তিবদ্ধভাবে বাধ্য" হয় না, যা সিএসএস বা অন্যান্য কাস্টম আচরণের সাথে স্টাইল করার ক্ষমতা হ্রাস করে। একই অন্য যে কোনও উপাদানগুলির জন্য সত্যই।

— amn

@ বল্টক্লক নিশ্চিত নয় যে আপনি লম্বোর দ্বারা কী বোঝাতে চাইছেন। সমস্ত বড় ব্রাউজারগুলি 2015 সাল থেকে সিনট্যাক্সের তৃতীয় এবং চূড়ান্ত সংশোধনকে সমর্থন করে; আন্তঃব্যবহারযোগ্যতা বেশ ভাল, আমি মনে করি। এমনকি আমরা এখন গ্রিডের জন্য ব্যাপক সমর্থন পেয়েছি! 🎉

— 0ime Vidas

@ আইমেড ভিদাস: আমি দেখছি, দেখে মনে হচ্ছে এটি এখন এক বছর ধরে সিআর হয়েছে। যথেষ্ট ফর্সা। আমি ভেবেছিলাম এটি কখনই তৈরি হবে না।

— BoltClock

2017 সত্যিই। আমি আমার ক্রোধ কোথায় চিহ্নিত করব? ফ্লেক্সবক্স, অগণিত নিবন্ধ, টিউটস, ট্রায়াল / ত্রুটিগুলি নিরাপদে প্রয়োগের জন্য অপেক্ষা করার বছর, আমি সেখানে 98% পেয়েছি এবং ... ফিল্ডসেটগুলি। এটি আমার বাড়ির ওয়্যারিংয়ের জন্য একজন বৈদ্যুতিন শিল্পী পাওয়ার মতো, কেবল এটির জন্য এটি খুঁজে পাওয়া যায় যে একটি পাওয়ার জ্যাক মাটির দিকে নেই। "অতিরঞ্জিত করবেন না" আমি শুনি লোকেরা মনে করে, অতিরঞ্জিত আমি করি না। আমি আক্ষরিক এই আগামীকাল জন্য উত্তর দিতে হবে। আমার সমাধান করার জন্য বেশ কয়েকটি উত্তরাধিকারের টেবিল বাগের উত্তর ছিল ফ্লেক্স। ফ্লেক্স এখন অল্প কিছু মুষ্টিমেয় নন-লেগ্যাসি বাগের কারণ। আমি আমার ক্রোধ কোথায় চিহ্নিত করব?

— ডানজাহ

Answer 2

আমি খুঁজে বের এই Chrome এবং Firefox যেখানে উপর একটি বাগ হতে পারে legendএবং fieldsetকরা হয় উপাদান প্রতিস্থাপিত ।

বাগ রিপোর্ট:

বাগ ক্রোম (এখনও খোলা)
বাগ ফায়ারফক্স (v46 সাল থেকে স্থির)

একটি সম্ভাব্য কাজ:

একটি সম্ভাব্য কাজটি <div role="group">এইচটিএমএল-এ ব্যবহার করা এবং div[role='group']সিলেক্টর হিসাবে সিএসএসে প্রয়োগ করা হবে ।

---

হালনাগাদ

ইন Chrome সংস্করণ 83 button সাথে কাজ করতে পারেন display: inline-grid/grid/inline-flex/flex, আপনি নীচের ডেমো দেখতে পারেন:

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}

<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">

Answer 3

বাগ অগ্রাধিকার বাড়ানোর জন্য দয়া করে ক্রোম বাগটিকে তারকাচিহ্নিত করুন

এটি ক্রোমের একটি বাগ। এটির অগ্রাধিকার স্থির করার জন্য দয়া করে এই সমস্যাটিতে একটি তারকা যুক্ত করুন: https://bugs.chromium.org/p/chromium/issues/detail?id=375693

গড় সময়ে, আমি এই তিনটি কোড পেন উদাহরণ তৈরি করেছি যাতে সমস্যাটি সম্পর্কে কীভাবে কাজ করা যায় show এগুলি উদাহরণের জন্য সিএসএস গ্রিড ব্যবহার করে নির্মিত তবে একই কৌশলগুলি ফ্লেক্সবক্সের জন্য ব্যবহার করা যেতে পারে।

কিংবদন্তির পরিবর্তে আরিয়া-লেবেলবি ব্যবহার করা

সমস্যাটি মোকাবেলার জন্য এটি আরও উত্তম উপায়। খারাপ দিকটি হ'ল প্রতিটি নকল কিংবদন্তী উপাদানগুলিতে প্রয়োগ করা স্বতন্ত্র আইডি তৈরির জন্য আপনাকে মোকাবেলা করতে হবে।

https://codepen.io/daniel-tonon/pen/vaaGzZ

<style>
.flex-container {
    display: flex;
}
</style>

<fieldset aria-labelledby="fake-legend">
    <div class="flex-container">
        <div class="flex-child" id="fake-legend">
            I am as good accessibilty wise as a real legend
        </div>

        ...

    </div>
</fieldset>

ফিল্ডসেট এবং কিংবদন্তির পরিবর্তে ভূমিকা = "গোষ্ঠী" এবং আরিয়া-লেবেলবি ব্যবহার করা

আপনার যদি কোনও ভাইবোন উপাদানটির উচ্চতা পর্যন্ত প্রসারিত করতে এবং তার প্রসারিতটিকে তার বাচ্চাদের উপর দিয়ে যেতে সক্ষম করতে ফ্লেক্স-ধারক প্রয়োজন হয় তবে আপনার role="group"পরিবর্তে ব্যবহার করতে হবে<fieldset>

https://codepen.io/daniel-tonon/pen/BayRjGz

<style>
.flex-container {
    display: flex;
}
</style>

<div role="group" class="flex-container" aria-labelledby="fake-legend">
    <div class="flex-child" id="fake-legend">
        I am as good accessibilty wise as a real legend
    </div>

    ...

</div>

স্টাইলিংয়ের উদ্দেশ্যে ভুয়া সদৃশ কিংবদন্তি তৈরি করা

এটি এটি করার অনেক বেশি হ্যাকি উপায়। এটি এখনও ঠিক অ্যাক্সেসযোগ্য তবে এটি এভাবে করার সময় আপনার আইডি নিয়ে কাজ করতে হবে না। মূল নীচের দিকটি হ'ল আসল কিংবদন্তি উপাদান এবং নকল কিংবদন্তী উপাদানগুলির মধ্যে নকল সামগ্রী থাকতে চলেছে।

https://codepen.io/daniel-tonon/pen/zLLqjY

<style>
.screen-reader-only {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.flex-container {
    display: flex;
}
</style>

<fieldset>
    <legend class="screen-reader-only">
        I am a real screen-reader accessible legend element
    </legend>

    <div class="flex-container">
        <div class="flex-child" aria-hidden="true">
            I am a fake legend purely for styling purposes
        </div>

        ...

    </div>
</fieldset>

কিংবদন্তিটি অবশ্যই সরাসরি প্রতারণাপূর্ণ হতে হবে

আপনি যখন নিজেকে প্রথমে এটি ঠিক করার চেষ্টা করছেন, আপনি সম্ভবত এটি করার চেষ্টা করবেন:

<!-- DO NOT DO THIS! -->
<fieldset>
    <div class="flex-container">
        <legend class="flex-child">
            Broken semantics legend text
        </legend>

        ...

    </div>
</fieldset>

আপনি এটি কার্যকরভাবে আবিষ্কার করবেন এবং তারপরে আপনি সম্ভবত এটি দ্বিতীয় চিন্তা না দিয়েই এগিয়ে চলবেন।

সমস্যাটি হ'ল ফিল্ডসেট এবং কিংবদন্তির মধ্যে একটি ডিভ র‍্যাপার লাগানো দুটি উপাদানগুলির মধ্যে সম্পর্ককে ভেঙে দেয়। এটি ফিল্ডসেট / কিংবদন্তির শব্দার্থবিভাজনকে ভেঙে দেয়।

সুতরাং এটি করে আপনি ফিল্ডসেট / কিংবদন্তি ব্যবহারের পুরো উদ্দেশ্যটিকে প্রথম স্থানে পরাজিত করেছেন।

এছাড়াও, যদি আপনি সেই ফিল্ডসেটটি কোনও কিংবদন্তি না দেন তবে কোনও ফিল্ডসেট ব্যবহার করার খুব বেশি দরকার নেই।

Answer 4

আমার অভিজ্ঞতায়, আমি খুঁজে পেয়েছি যে <fieldset>, না হয় <button>, না <textarea>সঠিকভাবে ব্যবহার করতে পারে display:flexবা উত্তরাধিকার সূত্রে প্রাপ্ত বৈশিষ্ট্যগুলিও।

অন্যরা ইতিমধ্যে উল্লিখিত হিসাবে, বাগ রিপোর্ট করা হয়েছে। যদি আপনি অর্ডারিং (যেমন order:2) নিয়ন্ত্রণ করতে ফ্লেক্সবক্স ব্যবহার করতে চান তবে আপনাকে উপাদানটি একটি ডিভের মধ্যে আবৃত করতে হবে। যদি আপনি প্রকৃত বিন্যাস এবং মাত্রা নিয়ন্ত্রণ করতে ফ্লেক্সবক্স করতে চান, তবে আপনি ইনপুট নিয়ন্ত্রণের পরিবর্তে (কোনটি দুর্গন্ধযুক্ত, আমি জানি) পরিবর্তে একটি ডিভি ব্যবহার করে বিবেচনা করতে পারেন।

Answer 5

<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

রোল-গ্রুপ ব্যবহার করা প্রয়োজন কারণ ফায়ারফক্স, ক্রোম এবং আমি মনে করি যে সাফারিতে ফিল্ডসেটগুলি আপাতদৃষ্টিতে একটি বাগ রয়েছে। তারপরে সিএসএসে নির্বাচক কেবল সহজভাবেই থাকতেন

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

সম্পাদনা করুন: এখানে কিছু সমস্যা রয়েছে যা অন্যান্য লোকেরাও অনুভব করে।

375693 সংখ্যা

262679 সংখ্যা

Comments

এটি ক্রোম 60 এ এখনও একটি সমস্যা

— বিবর্তনবক্স

এখনও এখানে ক্রোম 66.

— ব্র্যাড

Chrome এর 72 পরীক্ষা করা হচ্ছে।

— danemacmillan

ক্রোম 73 চেক ইন করছে

— মাইকেল ড্রপার

ক্রোম 75 চেক ইন ইন

— xddict

Answer 6

আপনি <fieldset>নিম্নলিখিত প্রস্তাবগুলি সহ অতিরিক্ত ডিভ রাখতে পারেন :

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}

Comments

ডাউনভোটস আমি বুঝতে পারছি না। এটি আসলে সঠিক। তবে মনে রাখবেন যে <legend>উপাদানটিকে (যদি ব্যবহার করা হয়) <fieldset>ততোধিক স্তরটিকে ব্যবহারের উদ্দেশ্যে হিসাবে রাখতে হয় ( Permitted content: An optional <legend> element, followed by flow content.- ডেভেলপার.মোজিলা.আর.ইন.ইউএস

— ডকস / ওয়েব

এটি আমি ছিল না, তবে আমার ধারণা করা উচিত ডাউনওয়েটের প্রশ্নের উত্তর না দেওয়ার সাথে কিছু করার আছে। এটি কোনও কর্মবিধ্বনির সন্ধানের জন্য নয়, বরং নিজের আচরণের জন্য fieldset।

— মাঙ্গো

হ্যাঁ, সরাসরি প্রশ্নের উত্তর না দিতে পারে (যা কিছুটা দার্শনিক ছিল), তবে এটি এই হাস্যকর বাগের সম্ভাব্য সমাধান fix

— এরিক এস। বুলিংটন

ডাউন ভোট দিয়েছে কারণ এটি <legend>উপাদানটির শব্দার্থভাঙ্গা ভাঙ্গতে উত্সাহিত করে । এটি প্রথম স্থানে ফিল্ডসেট / কিংবদন্তি ব্যবহারের উদ্দেশ্যকে পরাস্ত করে। : এখানে আমার উত্তর দেখুন stackoverflow.com/a/59425373/1611058

— ড্যানিয়েল Tonon

Answer 7

মূল প্রশ্নের উত্তর দিতে: হ্যাঁ, এটি একটি বাগ, তবে প্রশ্নটি জিজ্ঞাসা করার সময় এটি সঠিকভাবে সংজ্ঞায়িত হয়নি।

এখন ফিল্ডসেটের জন্য রেন্ডারিং আরও ভালভাবে সংজ্ঞায়িত করা হয়েছে: https://html.spec.whatwg.org/m

ফায়ারফক্স এবং সাফারিতে এখন কাজ flexboxচলছে fieldset। এটি এখনও ক্রোমিয়ামে নেই। ( Https://bugs.chromium.org/p/chromium/issues/detail?id=375693 দেখুন )

এছাড়াও 2018 এর স্পেসিফিকেশনের উন্নতির জন্য https://blog.whatwg.org/the-state-of-fieldset-interoperability দেখুন ।