html هل يمكن تحقيق تأثير مماثل لـ<fieldset> دون استخدام العلامة<fieldset>؟




css (7)

حصلت على نتيجة معقولة.

    <div>
      <div style='position:absolute;float:top;background-image: url("whiteSquare.jpg");height:20px;z-index:10;font-size:20px'>
            Header
        </div>
        
         <div style='position:absolute;float:top;border:1px dashed gray;width:300px;margin-top:12px;z-index:1'>
             <div style='margin-top:20px;'>
             <table>
              <tr>
                  <td>A</td>
                  <td>B</td>
                 </tr>
                 <tr>
                  <td>A</td>
                  <td>B</td>
                 </tr>
             </table>
             </div>
        </div>
    </div>

أنا شخصياً أحب علامة <fieldset> نظرًا لكيفية رسم مربع ووضعه <legend> في الجزء العلوي منه ، على الحدود. مثله.

ومع ذلك ، تم إنشاء عنصر مجموعة fieldset لتنظيم forms ، واستخدامه للتصميم العام ليس أفضل من استخدام الجداول للتصميم العام. لذلك ، سؤالي هو ... كيف يمكنني تحقيق نفس النتيجة باستخدام علامة أخرى؟ يجب مسح الحدود تحت <legend> (أو أي علامة أخرى سيتم استخدامها) ، وبما أنه قد يكون هناك صورة خلفية "معقدة" للجسم ، لا أستطيع تحمل مجرد تعيين background-color الأسطورة على تطابق واحد من عنصر تحت.

أرغب في العمل بدون JavaScript ، ولكن التنسيقات المستندة إلى XML و CSS3 (مثل SVG أو XHTML) جيدة.


Answer #1

أقوم بتحديث دلالة Anonymous قليلاً على ذلك:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title><style type="text/css">

.fake_fieldset {
    border: 2px groove ButtonFace;
    border-top-width: 0;
    margin-left: 2px;
    margin-right: 2px;
    padding: .35em .625em .75em;
    margin-top: 1em;
    position: relative;
}

.fake_legend {
    margin-top: -1em;
}

.fake_legend.test1::before {
    position: absolute;
    top: 0;
    left: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 0.5em;
}

.fake_legend.test1::after {
    position: absolute;
    top: 0;
    right: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 80%;
}
.fake_legend.test1 div {
    z-index: 100;
    background: white;
    position: relative;
    float: left;
}


.fake_fieldset.test2 {
    padding: 0;
    padding-top: 1px; /* no collapsed margin */
}

.fake_fieldset.test2 .fake_fieldset.container {
    margin: 0;
    border: 0;
}

.fake_legend.test2 {
    display: table;
    width: 100%;
}

.fake_legend.test2 span {
    display: table-cell;
}

.fake_legend.test2 span:first-child {
    width: 0.5em;
}
.fake_legend.test2 span:first-child + span {
    width: 0; /* cells stretch */
}
.fake_legend.test2 span:first-child,
.fake_legend.test2 span:last-child {
    /* the rest of this code is left as an exercise for the reader */
}
</style></head><body>

<fieldset><legend>foo</legend>bar</fieldset>

<div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div>

<div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div>

</body></html>

Answer #2

عرض jsBin التجريبي

.fieldset {
  border: 1px solid #ddd;
  margin-top: 1em;
  width: 500px;
}

.fieldset h1 {
  font-size: 12px;
  text-align: center;
}

.fieldset h1 span {
  display: inline;
  border: 1px solid #ddd;
  background: #fff;
  padding: 5px 10px;
  position: relative;
  top: -1.3em;
}
<div class="fieldset">
  <h1><span>Title</span></h1>
  <p>Content</p>
</div>


Answer #3

ومع ذلك ، فقد تم تنظيم النماذج ، واستخدامها للتصميم العام ليس أفضل من استخدام الجداول للتصميم العام

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

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

نصيحتي هي استخدامها إذا كنت ترغب في ذلك. لن أفعل ذلك ، لكن ليس بسبب اعتبارات دلالات: أفضل عدم الاعتماد على المؤثرات الخاصة ، وتجنب تكوين الوظيفة بشكل عام.

على أي حال ، إليك شيء يجب مضغه:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title><style type="text/css">

.fake_fieldset {
	border: 2px groove ButtonFace;
	border-top-width: 0;
	margin-left: 2px;
	margin-right: 2px;
	padding: .35em .625em .75em;
	margin-top: 1em;
	position: relative;
}

.fake_legend {
	margin-top: -1em;
}

.fake_legend.test1::before {
	position: absolute;
	top: 0;
	left: -1px;
	border-top: 2px groove ButtonFace;
	content: " ";
	width: 0.5em;
}

.fake_legend.test1::after {
	position: absolute;
	top: 0;
	right: -1px;
	border-top: 2px groove ButtonFace;
	content: " ";
	width: 80%;
}


.fake_fieldset.test2 {
	padding: 0;
	padding-top: 1px; /* no collapsed margin */
}

.fake_fieldset.test2 .fake_fieldset.container {
	margin: 0;
	border: 0;
}

.fake_legend.test2 {
	display: table;
	width: 100%;
}

.fake_legend.test2 span {
	display: table-cell;
}

.fake_legend.test2 span:first-child {
	width: 0.5em;
}
.fake_legend.test2 span:first-child + span {
	width: 0; /* cells stretch */
}
.fake_legend.test2 span:first-child,
.fake_legend.test2 span:last-child {
	/* the rest of this code is left as an exercise for the reader */
}


</style></head><body>

<fieldset><legend>foo</legend>bar</fieldset>

<div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div>

<div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div>

</body></html>


Answer #4

استخدم ::before الكاذب لإنشاء الحد العلوي من <fieldset> مضاهاته ، ثم ضع العنصر <legend> مضاهاته على ::before block مع z-index وخصائص position . أخيرًا ، استخدم التدرج اللوني وتوقف اللون الصلب في الجزء العلوي من مجموعة الحقول التي تمت مضاهاتها ، واضبط اللون العلوي للتدرج الخطي على الشفافية حتى تكون أي خلفية خلف مجموعة الحقول المزيفة مرئية.


Answer #5

لا ، هذا غير ممكن حقًا. حتى صناع المتصفح أنفسهم يكافحون مع ذلك.

بالطبع ، لم أستطع مقاومة الدخول فيه على أي حال. وأمضيت الكثير من الوقت في ذلك ، فقد توصل Anonymous إلى "حل" يشبه إلى حد ما الحل الخاص بي في الوقت نفسه ( test1 ). لكن لي لا يحتاج إلى عرض "أسطورة" ثابت.

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

.fieldset {
  border: 2px groove threedface;
  border-top: none;
  padding: 0.5em;
  margin: 1em 2px;
}

.fieldset>h1 {
  font: 1em normal;
  margin: -1em -0.5em 0;
}

.fieldset>h1>span {
  float: left;
}

.fieldset>h1:before {
  border-top: 2px groove threedface;
  content: ' ';
  float: left;
  margin: 0.5em 2px 0 -1px;
  width: 0.75em;
}

.fieldset>h1:after {
  border-top: 2px groove threedface;
  content: ' ';
  display: block;
  height: 1.5em;
  left: 2px;
  margin: 0 1px 0 0;
  overflow: hidden;
  position: relative;
  top: 0.5em;
}
<fieldset>
  <legend>Legend</legend> Fieldset
</fieldset>

<div class="fieldset">
  <h1><span>Legend</span></h1> Fieldset
</div>

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

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


Answer #6

أعتقد أنك تعرف بالفعل الجواب.

لديك خياران ، أو قم بتوفير الحد الخاص بك (هذا كثير من العمل غير الضروري) أو ضع عنصرًا في مكانه (الحدوث هو المشكلة (أنه من الممكن أن يكون لديك لون خلفي صلب ، ولكن ربما يكون ذلك جيدًا).

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

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

لذلك أنا مجبر على السؤال ، ما هي المشكلة مع <legend />؟





fieldset