افسانه می گوید، روزی می رسد که افکت حذفی مرز زیبا مجموعه فیلدست با هر عنصر html امکان پذیر خواهد بود.
و من یک خبر عالی دارم: در کروم، آن روز امروز است!
مجموعه فیلد؟ افسانه؟
اگر آشنا نیستید، در اینجا افکت حذفی مرز در مجموعه فیلد با یک افسانه آمده است:
نمونه‌های افسانه مجموعه فیلد در یک اسکرین شات کمی تغییر یافته از VanillaHTML
عرض از legend (عنوان) بریدن یک سوراخ در مرز fieldset به صورت خودکار
در حالی که از نظر فنی فقط استفاده از آن امکان پذیر است
در هر جایی، معمولاً استفاده از a توصیه نمی شود
خارج از a رفتار حذفی افسانه مرزی فیلدست در هر کجا
انجام این کار بی‌اهمیت نیست، بنابراین من هر ذره از پیچیدگی‌هایی را که می‌توانستم پنهان کردم تا آن را تا حدی پیش پاافتاده کنم که تکرار شود:
-
@importابزار fieldset-legend در css شما. - را اضافه کنید
fieldset-legendکلاس به لفاف - را تنظیم کنید
--fl-leftدارایی به هر
و کتابخانه محل قرار خواهد داد :first-child بنابراین به صورت عمودی در مرکز بالای عنصر قرار می گیرد و چیزهای پشت آن را حذف می کند!
برای ایجاد شکاف در اطراف عنوان، padding را به عنوان اضافه کنید :first-child هر طور که شما بخواهید
بزرگترین مشکل در اینجا این است که شما نمی توانید گره های متن ساده را مستقیماً در آن قرار دهید
fieldset-legendلفاف، متن باید درون عناصر خودش تودرتو باشد.
همچنین، از نظر فنی fieldsetناک اوت مرزی اینطور نیست غرق شدن به پایین legend المان کنید و پس‌زمینه را نیز مانند آنچه در بالا انجام می‌دهد، کلیپ کنید.
اگر ناک اوت را به تنها ترجیح می دهید غرق شدن از طریق مرز، می توانید یک مورد اضافی ارائه دهید --fl-sink و آن را برابر با عرض حاشیه خود قرار دهید:
آیا کار دیگری انجام می دهد؟
این کار را انجام می دهد!
--fl-left جایگزین ها
به جای --fl-left، می توانید در عوض استفاده کنید --fl-center.
اگر تنظیم کنید --fl-center به 0px، عنوان به صورت افقی در امتداد لبه بالایی قرار می گیرد.
اگر آن را تنظیم کنید -10px، به سمت چپ وسط توسط آفست می شود 10px.
آن را تنظیم کنید 15px و به سمت راست از مرکز به سمت راست تغییر می کند 15px.
به جای --fl-left یا --fl-center، همچنین می توانید استفاده کنید --fl-right با رفتار مورد انتظار
هر 3 تای اینها هستند
عنوان به عنوان :first-child جایگزین ها
ممکن است برای شما مهم باشد که عناصر دیگری مانند پرش های صفحه فقط برای صفحه خوان را قبل از عنوان در داخل صفحه قرار دهید. fieldset-legend ظرف
یک کلاس بگذارید fieldset-legend-title بر روی هر یک از فرزندان مستقیم شما fieldset-legend عنصر و کتابخانه آن عنصر را به همان موقعیت دلخواه در بالا می برد و ترک می کند :first-child به تنهایی
fieldset-legend استفاده می کند ::before شبه
می توانید از آن استفاده کنید ::after شبه در عوض، فقط نام کلاس را تغییر دهید fieldset-legend به fieldset-legend-after
fieldset-legend شبه نیست؟
این استفاده پیشرفته است اما …
شما می توانید inset: 0px; یک عنصر در داخل لفاف، آن را هر طور که می خواهید سفارشی کنید و استفاده کنید fieldset-legend-custom به جای fieldset-legend یا fieldset-legend-after.
این کار تمام بریده های کتابخانه را حذف می کند و یک سفارشی به شما می دهد mask برای استفاده در هر نقطه از داخل fieldset-legend-custom عنصر
به عنوان مثال، اگر می‌خواهید از آن با کتابخانه شکل‌دهی علمی تخیلی مورد علاقه خود استفاده کنید، augmented-ui:
رفتار برگشتی
پشتیبانی از ویژگی محدود مورد نیاز برای استفاده از این ابزار است timeline-scope.
پرسش‌های مربوط به سبک کانتینر نیز مورد نیاز است.
اولین نسخه نمایشی این مقاله در مرورگرهای غیر کروم به این صورت است:
برای به حداقل رساندن تفاوت‌ها از همان استایل مکانیکی استفاده می‌کند، مانند موقعیت غیراستاتیک و isolation: isolate; اما مهم‌تر از همه، آن عنوان را به عقب میبرد و دو کار را انجام می‌دهد !important چیزها:
- عنوان
colorتبدیل می شودcurrentColor– محتوای پشت عنوان از بدنه به داخل شما تغییر می کندfieldset-legendظرفی که ممکن است زمینه بسیار متفاوتی داشته باشد. با استفاده ازcurrentColorاطمینان حاصل می کند که محتوا خوانا است زیرا بقیه محتوای موجود در مجموعه بدون فیلد شما احتمالاً قبلاً به درستی تنظیم شده است. - در همین راستا، نمی‌توانم بدانم که آیا عنصر عنوان شما قبلاً پس‌زمینه خاص خود را داشته است یا نه (البته اگر چنین بود، برای قرار دادن آن بر روی مرز نیازی به این ابزار ندارید) بنابراین پس‌زمینه مجبور می‌شود
transparent، تضمین می کندcurrentColorبر رویfieldset-legendپس زمینه، که در اکثر موارد از قبل قابل خواندن خواهد بود.
برای تعیین رفتار بازگشتی خاص، می توانید تنظیم کنید--fl-fallback-title-color و --fl-fallback-title-background که به جای استفاده خواهد شد currentColor یا transparent در صورتی که در جایی بدون پشتیبانی ارائه شود.
و این همان چیزی است که نسخه ی نمایشی سفارشی بالا در مرورگرهایی که پشتیبانی نمی کنند به نظر می رسد fieldset-legend:
پشتیبانی مجدد بیشتر
اگر می دانید چگونه از تکنیک قدیمی Space Toggle من استفاده کنید، این کتابخانه همچنین ارائه می دهد:
--fl-supported، که در صورت پشتیبانی و initial زمانی که پشتیبانی نمی شود
و
--fl-not-supported، که برعکس است.
تماس 👽 را باز کنید
لطفاً اگر برای هر یک از این موارد به کمک نیاز دارید، درخواست ویژگی دارید یا می خواهید آنچه ایجاد کرده اید به اشتراک بگذارید، تماس بگیرید!
🦋@JaneOri.PropJockey.io
𝕏@Jane0ri
