ປິດເປີດໃໝ່
Reboot, ການລວບລວມການປ່ຽນແປງ CSS ສະເພາະໃນໄຟລ໌ດຽວ, kickstart Bootstrap ເພື່ອໃຫ້ພື້ນຖານທີ່ສະຫງ່າງາມ, ສອດຄ່ອງ, ແລະງ່າຍດາຍທີ່ຈະສ້າງຂື້ນ.
ວິທີການ
Reboot ກໍ່ສ້າງຕາມ Normalize, ສະຫນອງອົງປະກອບ HTML ຫຼາຍຮູບແບບທີ່ມີຄວາມຄິດເຫັນບາງຢ່າງໂດຍໃຊ້ຕົວເລືອກອົງປະກອບເທົ່ານັ້ນ. ຄໍເຕົ້າໄຂ່ທີ່ເພີ່ມເຕີມແມ່ນເຮັດກັບຫ້ອງຮຽນເທົ່ານັ້ນ. ຕົວຢ່າງ, ພວກເຮົາປິດເປີດບາງ <table>
ຮູບແບບສໍາລັບພື້ນຖານທີ່ງ່າຍກວ່າ ແລະຕໍ່ມາໃຫ້ .table
, .table-bordered
, ແລະອື່ນໆອີກ.
ນີ້ແມ່ນຂໍ້ແນະນຳ ແລະເຫດຜົນຂອງພວກເຮົາສຳລັບການເລືອກສິ່ງທີ່ຈະລົບລ້າງໃນ Reboot:
- ອັບເດດບາງຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບເພື່ອໃຊ້
rem
s ແທນem
s ສໍາລັບໄລຍະຫ່າງອົງປະກອບທີ່ສາມາດຂະຫຍາຍໄດ້. - ຫຼີກເວັ້ນ
margin-top
. ຂອບແນວຕັ້ງສາມາດຍຸບລົງໄດ້, ໃຫ້ຜົນໄດ້ຮັບທີ່ບໍ່ຄາດຄິດ. ສິ່ງທີ່ ສຳ ຄັນກວ່ານັ້ນ, ທິດທາງດຽວmargin
ແມ່ນຮູບແບບທາງຈິດທີ່ງ່າຍດາຍກວ່າ. - ສໍາລັບການຂະຫຍາຍຂະຫນາດຂອງອຸປະກອນໄດ້ງ່າຍຂຶ້ນ, ອົງປະກອບບລັອກຄວນໃຊ້
rem
s ສໍາລັບmargin
s. - ຮັກສາການປະກາດຂອງ
font
ຄຸນສົມບັດທີ່ກ່ຽວຂ້ອງກັບຕໍາ່ສຸດທີ່, ການນໍາໃຊ້inherit
ທຸກຄັ້ງທີ່ເປັນໄປໄດ້.
ຕົວແປ CSS
ເພີ່ມໃນ v5.1.1
ດ້ວຍ v5.1.1, ພວກເຮົາໄດ້ເຮັດມາດຕະຖານ @import
s ທີ່ຕ້ອງການໃນທົ່ວ CSS ທັງຫມົດຂອງພວກເຮົາ (ລວມທັງ bootstrap.css
, bootstrap-reboot.css
, , ແລະ bootstrap-grid.css
ລວມ _root.scss
. ນີ້ເພີ່ມ :root
ຕົວແປ CSS ໃນລະດັບທຸກ bundle, ໂດຍບໍ່ຄໍານຶງເຖິງວິທີການຈໍານວນຫຼາຍຂອງພວກມັນຖືກນໍາໃຊ້ໃນມັດນັ້ນ. ໃນທີ່ສຸດ Bootstrap 5 ຈະສືບຕໍ່. ເບິ່ງຕົວແປ CSS ເພີ່ມເຕີມເມື່ອເວລາຜ່ານໄປ.
ໜ້າເລີ່ມຕົ້ນ
<html>
ແລະ ອົງ <body>
ປະກອບໄດ້ຖືກປັບປຸງເພື່ອໃຫ້ມີຄ່າເລີ່ມຕົ້ນທົ່ວຫນ້າທີ່ດີກວ່າ. ���ດຍສະເພາະ:
- ມັນໄດ້
box-sizing
ຖືກກໍານົດທົ່ວໂລກໃນທຸກໆອົງປະກອບ - ລວມທັງ*::before
ແລະ*::after
, ກັບborder-box
. ນີ້ຮັບປະກັນວ່າຄວາມກວ້າງຂອງອົງປະກອບທີ່ປະກາດຈະບໍ່ເກີນເນື່ອງຈາກ padding ຫຼືຊາຍແດນ.- ບໍ່ມີພື້ນຖານ
font-size
ຖືກປະກາດຢູ່ໃນ<html>
, ແຕ່16px
ຖືກສົມມຸດ (ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ).font-size: 1rem
ຖືກນໍາໃຊ້ໃນການແກ້ໄຂ<body>
ປະເພດທີ່ຕອບສະຫນອງໄດ້ງ່າຍໂດຍຜ່ານການສອບຖາມສື່ໃນຂະນະທີ່ເຄົາລົບຄວາມມັກຂອງຜູ້ໃຊ້ແລະຮັບປະກັນວິທີການທີ່ສາມາດເຂົ້າເຖິງໄດ້ຫຼາຍຂຶ້ນ. ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບນີ້ສາມາດຖືກລົບລ້າງໂດຍການດັດ$font-size-root
ແປງຕົວແປ.
- ບໍ່ມີພື້ນຖານ
- ນອກ
<body>
ຈາກນີ້ຍັງກໍານົດລະດັບໂລກfont-family
,font-weight
,line-height
, ແລະcolor
. ນີ້ແມ່ນການສືບທອດຕໍ່ມາໂດຍບາງອົງປະກອບແບບຟອມເພື່ອປ້ອງກັນຄວາມບໍ່ສອດຄ່ອງຂອງຕົວອັກສອນ. - ເພື່ອຄວາມປອດໄພ,
<body>
ມີການປະກາດbackground-color
, ເລີ່ມຕົ້ນເປັນ#fff
.
stack ຟອນເດີມ
Bootstrap ໃຊ້ " stack font native" ຫຼື "system font stack" ສໍາລັບການສະແດງຂໍ້ຄວາມທີ່ດີທີ່ສຸດໃນທຸກອຸປະກອນແລະ OS. ຟອນລະບົບເຫຼົ່ານີ້ໄດ້ຮັບການອອກແບບໂດຍສະເພາະກັບອຸປະກອນຂອງມື້ນີ້ຢູ່ໃນໃຈ, ດ້ວຍການປັບປຸງການສະແດງຜົນໃນໜ້າຈໍ, ຮອງຮັບຟອນຕົວແປ ແລະອື່ນໆອີກ. ອ່ານເພີ່ມເຕີມກ່ຽວກັບ stacks ຕົວອັກສອນພື້ນເມືອງໃນ ບົດຄວາມ Smashing Magazine ນີ້ .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
ໃຫ້ສັງເກດວ່າເນື່ອງຈາກວ່າ stack font ປະກອບມີຕົວອັກສອນ emoji, ສັນຍາລັກທົ່ວໄປຈໍານວນຫຼາຍ / dingbat unicode ຕົວອັກສອນຈະຖືກສະແດງເປັນຮູບຫຼາຍສີ. ຮູບລັກສະນະຂອງພວກມັນຈະແຕກຕ່າງກັນ, ຂຶ້ນກັບຮູບແບບທີ່ໃຊ້ໃນຕົວອັກສອນ emoji ພື້ນເມືອງຂອງຕົວທ່ອງເວັບ / ເວທີ, ແລະພວກມັນຈະບໍ່ໄດ້ຮັບຜົນກະທົບຈາກ color
ຮູບແບບ CSS ໃດໆ.
ອັນນີ້ font-family
ຖືກນຳໃຊ້ກັບ <body>
ແລະ ສືບທອດໂດຍອັດຕະໂນມັດທົ່ວໂລກຕະຫຼອດ Bootstrap. ເພື່ອປ່ຽນທົ່ວໂລກ font-family
, ອັບເດດ $font-family-base
ແລະລວບລວມ Bootstrap ຄືນໃໝ່.
ຕົວແປ CSS
ເນື່ອງຈາກ Bootstrap 5 ຍັງສືບຕໍ່ເປັນຜູ້ໃຫຍ່, ຮູບແບບຫຼາຍຂື້ນຈະຖືກສ້າງຂື້ນດ້ວຍ ຕົວແປ CSS ເປັນວິທີການສະຫນອງການປັບແຕ່ງໃນເວລາທີ່ແທ້ຈິງຫຼາຍຂຶ້ນໂດຍບໍ່ຈໍາເປັນຕ້ອງລວບລວມ Sass ສະເຫມີ. ວິທີການຂອງພວກເຮົາແມ່ນເພື່ອເອົາຕົວແປ Sass ຂອງພວກເຮົາແລະປ່ຽນມັນເຂົ້າໄປໃນຕົວແປ CSS. ດ້ວຍວິທີນັ້ນ, ເຖິງແມ່ນວ່າທ່ານບໍ່ໃຊ້ຕົວແປ CSS, ທ່ານຍັງມີອໍານາດທັງຫມົດຂອງ Sass. ນີ້ຍັງຢູ່ໃນຄວາມຄືບຫນ້າແລະຈະໃຊ້ເວລາເພື່ອປະຕິບັດຢ່າງເຕັມສ່ວນ.
ຕົວຢ່າງ, ພິຈາລະນາ :root
ຕົວແປ CSS ເຫຼົ່ານີ້ສໍາລັບ <body>
ຮູບແບບທົ່ວໄປ:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
ໃນທາງປະຕິບັດ, ຕົວແປເຫຼົ່ານັ້ນຖືກໃຊ້ໃນ Reboot ເຊັ່ນ:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
ເຊິ່ງອະນຸຍາດໃຫ້ທ່ານເຮັດການປັບແຕ່ງຕາມເວລາຈິງຕາມທີ່ທ່ານຕ້ອງການ:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
ຫົວຂໍ້ແລະວັກ
ອົງປະກອບຫົວຂໍ້ທັງໝົດ—ເຊັ່ນ, <h1>
—ແລະ <p>
ຖືກຕັ້ງຄ່າຄືນໃໝ່ເພື່ອເອົາພວກມັນ margin-top
ອອກ. ສ່ວນຫົວມີການ margin-bottom: .5rem
ເພີ່ມ ແລະຫຍໍ້ margin-bottom: 1rem
ໜ້າເພື່ອໃຫ້ໄລຍະຫ່າງໄດ້ງ່າຍຂຶ້ນ.
ຫົວຂໍ້ | ຕົວຢ່າງ |
---|---|
<h1></h1> |
h1. ຫົວຂໍ້ Bootstrap |
<h2></h2> |
h2. ຫົວຂໍ້ Bootstrap |
<h3></h3> |
h3. ຫົວຂໍ້ Bootstrap |
<h4></h4> |
h4. ຫົວຂໍ້ Bootstrap |
<h5></h5> |
h5. ຫົວຂໍ້ Bootstrap |
<h6></h6> |
h6. ຫົວຂໍ້ Bootstrap |
ລາຍການ
ລາຍຊື່ທັງໝົດ— <ul>
, <ol>
, ແລະ <dl>
— ມີການ margin-top
ລຶບອອກ ແລະ margin-bottom: 1rem
. ລາຍຊື່ທີ່ຊ້ອນກັນບໍ່ມີ margin-bottom
. ພວກເຮົາຍັງໄດ້ຣີເຊັດການ padding-left
ເປີດ <ul>
ແລະ <ol>
ອົງປະກອບ.
- ລາຍຊື່ທັງໝົດມີຂອບເທິງສຸດຂອງພວກມັນອອກ
- ແລະຂອບລຸ່ມຂອງເຂົາເຈົ້າ normalized
- ລາຍຊື່ທີ່ຊ້ອນກັນບໍ່ມີຂອບລຸ່ມ
- ດ້ວຍວິທີນີ້, ພວກມັນມີລັກສະນະຫຼາຍກວ່າເກົ່າ
- ໂດຍສະເພາະໃນເວລາທີ່ຕິດຕາມດ້ວຍລາຍການລາຍການຫຼາຍ
- padding ຊ້າຍຍັງໄດ້ຮັບການປັບ
- ນີ້ແມ່ນລາຍການຄໍາສັ່ງ
- ມີລາຍການລາຍການຈໍານວນຫນຶ່ງ
- ມັນມີລັກສະນະໂດຍລວມຄືກັນ
- ໃນຖານະເປັນບັນຊີລາຍການ unordered ຜ່ານມາ
ສໍາລັບຄໍເຕົ້າໄຂ່ທີ່ງ່າຍກວ່າ, ລໍາດັບຊັ້ນທີ່ຊັດເຈນ, ແລະຊ່ອງຫວ່າງທີ່ດີກວ່າ, ລາຍຊື່ຄໍາອະທິບາຍໄດ້ປັບປຸງ margin
s. <dd>
s ປັບ margin-left
ແລະ 0
ເພີ່ມ margin-bottom: .5rem
. <dt>
s ແມ່ນ ກ້າຫານ .
- ລາຍລະອຽດ
- ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.
- ໄລຍະ
- ຄໍານິຍາມສໍາລັບຄໍາສັບ.
- ຄໍານິຍາມທີສອງສໍາລັບຄໍາດຽວກັນ.
- ໄລຍະອື່ນ
- ຄໍານິຍາມສໍາລັບຄໍາສັບອື່ນນີ້.
ລະຫັດໃນແຖວ
ຫໍ່ຕົວຫຍໍ້ຂອງລະຫັດໃນແຖວດ້ວຍ <code>
. ໃຫ້ແນ່ໃຈວ່າຈະຫນີວົງເລັບມຸມ HTML.
<section>
ຄວນຖືກຫໍ່ເປັນແຖວ.
For example, <code><section></code> should be wrapped as inline.
ບລັອກລະຫັດ
ໃຊ້ <pre>
s ສໍາລັບຫຼາຍເສັ້ນຂອງລະຫັດ. ອີກເທື່ອຫນຶ່ງ, ໃຫ້ແນ່ໃຈວ່າຈະຫນີວົງເລັບມຸມໃດໆໃນລະຫັດສໍາລັບການສະແດງຜົນທີ່ເຫມາະສົມ. ອົງ ປະ <pre>
ກອບຖືກຕັ້ງຄືນໃໝ່ເພື່ອເອົາມັນອອກ margin-top
ແລະໃຊ້ rem
ຫົວໜ່ວຍສໍາລັບມັນ margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
ຕົວແປ
ສໍາລັບການຊີ້ບອກຕົວແປໃຫ້ໃຊ້ <var>
ແທັກ.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ການປ້ອນຂໍ້ມູນຂອງຜູ້ໃຊ້
ໃຊ້ຕົວ <kbd>
ຊີ້ບອກການປ້ອນຂໍ້ມູນທີ່ຖືກປ້ອນຜ່ານແປ້ນພິມ.
ເພື່ອແກ້ໄຂການຕັ້ງຄ່າ, ກົດ ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
ຜົນຜະລິດຕົວຢ່າງ
ສໍາລັບການຊີ້ບອກຜົນໄດ້ຮັບຕົວຢ່າງຈາກໂຄງການ, ໃຊ້ <samp>
ແທັກ.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
ຕາຕະລາງ
ຕາຕະລາງຖືກປັບເລັກນ້ອຍເປັນຮູບແບບ <caption>
s, ຫຍໍ້ຂອບ, ແລະຮັບປະກັນຄວາມສອດຄ່ອງ text-align
ຕະຫຼອດ. ການປ່ຽນແປງເພີ່ມເຕີມສໍາລັບຂອບເຂດ, padding, ແລະອື່ນໆມາກັບ ຫ້ອງ .table
ຮຽນ .
ຫົວຂໍ້ຕາຕະລາງ | ຫົວຂໍ້ຕາຕະລາງ | ຫົວຂໍ້ຕາຕະລາງ | ຫົວຂໍ້ຕາຕະລາງ |
---|---|---|---|
ຕາລາງ | ຕາລາງ | ຕາລາງ | ຕາລາງ |
ຕາລາງ | ຕາລາງ | ຕາລາງ | ຕາລາງ |
ຕາລາງ | ຕາລາງ | ຕາລາງ | ຕາລາງ |
ແບບຟອມ
ອົງປະກອບແບບຟອມຕ່າງໆໄດ້ຖືກປິດເປີດໃໝ່ແລ້ວສຳລັບຮູບແບບພື້ນຖານທີ່ງ່າຍດາຍກວ່າ. ນີ້ແມ່ນບາງການປ່ຽນແປງທີ່ໂດດເດັ່ນທີ່ສຸດ:
<fieldset>
s ບໍ່ມີຂອບ, padding, ຫຼືຂອບດັ່ງນັ້ນເຂົາເຈົ້າສາມາດໄດ້ຮັບການນໍາໃຊ້ໄດ້ຢ່າງງ່າຍດາຍເປັນ wrappers ສໍາລັບແຕ່ລະ inputs ຫຼືກຸ່ມຂອງ inputs.<legend>
s, ເຊັ່ນ fieldsets, ຍັງໄດ້ຖືກປ່ຽນຮູບແບບເພື່ອສະແດງເປັນຫົວຂໍ້ຂອງການຈັດລຽງ.<label>
s ຖືກຕັ້ງdisplay: inline-block
ໃຫ້ອະນຸຍາດໃຫ້margin
ນໍາໃຊ້.<input>
s,<select>
s,<textarea>
s, ແລະ<button>
s ສ່ວນຫຼາຍແມ່ນແກ້ໄຂໂດຍ Normalize, ແຕ່ Reboot ເອົາmargin
ຊຸດແລະຊຸດ ຂອງພວກເຂົາline-height: inherit
, ເຊັ່ນກັນ.<textarea>
s ຖືກດັດແປງພຽງແຕ່ສາມາດປັບຂະຫນາດໄດ້ຕາມແນວຕັ້ງຍ້ອນວ່າການປັບຂະຫນາດຕາມແນວນອນມັກຈະ "ແຕກ" ຮູບແບບຫນ້າ.<button>
s ແລະ<input>
ອົງປະກອບປຸ່ມມີcursor: pointer
ເວລາ:not(:disabled)
.
ການປ່ຽນແປງເຫຼົ່ານີ້, ແລະອື່ນໆອີກ, ແມ່ນສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້.
ຮອງຮັບການປ້ອນຂໍ້ມູນວັນທີ ແລະສີ
ຈື່ໄວ້ວ່າຂໍ້ມູນວັນທີ ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນ ໂດຍຕົວທ່ອງເວັບທັງຫມົດ, ຄື Safari.
ຕົວຊີ້ໃສ່ປຸ່ມ
Reboot ລວມມີການປັບປຸງສໍາລັບ role="button"
ການປ່ຽນຕົວກະພິບເລີ່ມຕົ້ນເປັນ pointer
. ເພີ່ມຄຸນລັກສະນະນີ້ໃສ່ອົງປະກອບເພື່ອຊ່ວຍຊີ້ບອກວ່າອົງປະກອບມີການໂຕ້ຕອບ. ບົດບາດນີ້ບໍ່ຈໍາເປັນສໍາລັບ <button>
ອົງປະກອບ, ເຊິ່ງໄດ້ຮັບ cursor
ການປ່ຽນແປງຂອງຕົນເອງ.
<span role="button" tabindex="0">Non-button element button</span>
ອົງປະກອບອື່ນໆ
ທີ່ຢູ່
ອົງ ປະ <address>
ກອບໄດ້ຖືກປັບປຸງເພື່ອປັບຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ font-style
ຈາກ italic
ໄປເປັນ normal
. line-height
ໃນປັດຈຸບັນຍັງໄດ້ຮັບການສືບທອດ, ແລະ margin-bottom: 1rem
ໄດ້ຖືກເພີ່ມ. <address>
s ແມ່ນສໍາລັບການນໍາສະເຫນີຂໍ້ມູນຕິດຕໍ່ສໍາລັບບັນພະບຸລຸດທີ່ໃກ້ທີ່ສຸດ (ຫຼືການເຮັດວຽກທັງຫມົດ). ຮັກສາການຈັດຮູບແບບໂດຍການລົງທ້າຍແຖວດ້ວຍ <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 ຊື່ເຕັມ
[email protected]
Blockquote
ຄ່າເລີ່ມຕົ້ນ margin
ຂອງ blockquotes ແມ່ນ 1em 40px
, ດັ່ງນັ້ນພວກເຮົາ reset ທີ່ເປັນ 0 0 1rem
ສໍາລັບບາງສິ່ງບາງຢ່າງທີ່ສອດຄ່ອງກັບອົງປະກອບອື່ນໆ.
ຄໍາເວົ້າທີ່ມີຊື່ສຽງ, ບັນຈຸຢູ່ໃນອົງປະກອບ blockquote.
ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່ ແຫຼ່ງ
ອົງປະກອບໃນແຖວ
ອົງ ປະ <abbr>
ກອບໄດ້ຮັບການຈັດຮູບແບບພື້ນຖານເພື່ອເຮັດໃຫ້ມັນໂດດເດັ່ນໃນບັນດາຂໍ້ຄວາມຫຍໍ້ຫນ້າ.
ສະຫຼຸບ
ຄ່າເລີ່ມຕົ້ນ cursor
ຂອງບົດສະຫຼຸບແມ່ນ text
, ດັ່ງນັ້ນພວກເຮົາຕັ້ງມັນໃຫມ່ pointer
ເພື່ອບົ່ງບອກວ່າອົງປະກອບສາມາດພົວພັນກັບໄດ້ໂດຍການຄລິກໃສ່ມັນ.
ບາງລາຍລະອຽດ
ຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບລາຍລະອຽດ.
ເຖິງແມ່ນວ່າລາຍລະອຽດເພີ່ມເຕີມ
ນີ້ແມ່ນແມ້ກະທັ້ງລາຍລະອຽດເພີ່ມເຕີມກ່ຽວກັບລາຍລະອຽດ.
[hidden]
ຄຸນລັກສະນະ HTML5
HTML5 ເພີ່ມ ຄຸນສົມບັດທົ່ວໂລກໃຫມ່ທີ່ມີຊື່ວ່າ[hidden]
, ເຊິ່ງຖືກຈັດຮູບແບບຕາມ display: none
ຄ່າເລີ່ມຕົ້ນ. ການກູ້ຢືມຄວາມຄິດຈາກ PureCSS , ພວກເຮົາປັບປຸງຕາມຄ່າເລີ່ມຕົ້ນນີ້ໂດຍການເຮັດ [hidden] { display: none !important; }
ເພື່ອຊ່ວຍປ້ອງກັນບໍ່ໃຫ້ມັນ display
ຖືກ overridden ໂດຍບັງເອີນ.
<input type="text" hidden>
jQuery ບໍ່ເຂົ້າກັນໄດ້
[hidden]
ບໍ່ເຂົ້າກັນໄດ້ກັບ jQuery $(...).hide()
ແລະ $(...).show()
ວິທີການ. ດັ່ງນັ້ນ, ໃນປັດຈຸບັນພວກເຮົາບໍ່ໄດ້ຮັບຮອງໂດຍສະເພາະ [hidden]
ກ່ຽວກັບເຕັກນິກອື່ນໆສໍາລັບການຄຸ້ມຄອງ display
ອົງປະກອບ.
ເພື່ອພຽງແຕ່ສະຫຼັບການເບິ່ງເຫັນຂອງອົງປະກອບ, ຊຶ່ງຫມາຍຄວາມວ່າມັນ display
ບໍ່ໄດ້ຖືກດັດແກ້ແລະອົງປະກອບຍັງສາມາດສົ່ງຜົນກະທົບຕໍ່ການໄຫຼເຂົ້າຂອງເອກະສານ, ໃຫ້ໃຊ້ ຊັ້ນ ແທນ.invisible
.