เพิ่มการรองรับ Fluid Typography ให้กับ WordPress Block Themes

การพิมพ์ของเหลวคือ a วิธีแฟนซี ของ “การอธิบายคุณสมบัติของฟอนต์ เช่น ขนาดหรือความสูงของบรรทัด ที่ปรับขนาดตามขนาดของวิวพอร์ตได้อย่างลื่นไหล” มันคือ ยังเป็นที่รู้จักในชื่ออื่น ๆเช่น การพิมพ์แบบโต้ตอบ ประเภทที่ยืดหยุ่น ประเภทของเหลว การพิมพ์ขนาดวิวพอร์ต การพิมพ์แบบไหล และแม้แต่ข้อความที่แสดงแบบโต้ตอบ

นี่คือ ตัวอย่างการพิมพ์ของเหลว ที่คุณสามารถเล่นสดได้ (มารยาทของ เอกสาร MDN). CSS-Tricks ครอบคลุมการพิมพ์ของเหลว อย่างกว้างขวางอีกด้วย แต่ประเด็นนี้ไม่ได้แนะนำให้คุณรู้จักกับการพิมพ์แบบไหล แต่จะใช้อย่างไร โดยเฉพาะอย่างยิ่ง ฉันต้องการแสดงให้คุณเห็นถึงวิธีการใช้การออกแบบตัวอักษรแบบไหลใน WordPress 6.1 ซึ่งเพิ่งเปิดตัวคุณลักษณะประเภทของเหลวโดยตรงใน WordPress Block Editor

เปิดของคุณ style.css ไฟล์ตบในกฎสไตล์ด้วยแฟนซี clamp()-อยู่บน font-size ทรัพย์สินและดีที่จะไปใช่มั้ย? แน่นอนว่านั่นจะทำให้คุณมีข้อความที่ลื่นไหล แต่หากต้องการได้รับการควบคุมตัวแก้ไขบล็อกที่ทำให้สามารถใช้ประเภทของเหลวที่ใดก็ได้บนไซต์ WordPress ของคุณ นั่นต้องใช้แนวทางที่แตกต่างออกไปในวันที่ถูกปิดกั้นเหล่านี้

รองรับการพิมพ์ของเหลวใน Gutenberg

นักพัฒนาธีม WordPress บางรายได้ใช้ clamp() ฟังก์ชันกำหนดของไหล font-sizeในธีม WordPress ของพวกเขา แม้กระทั่งในธีม "บล็อก" ที่ใหม่กว่า เช่น ยี่สิบยี่สิบสอง, ยี่สิบยี่สิบสามและอื่น ๆ

แต่ปลั๊กอิน Gutenberg ซึ่งเป็นปลั๊กอินที่มีการพัฒนาทดลองสำหรับบล็อก WordPress และคุณสมบัติตัวแก้ไขไซต์ ได้แนะนำการสนับสนุนสำหรับการพิมพ์แบบไหล เริ่มในเวอร์ชัน 13.8. ที่เปิดประตูสำหรับการใช้งานในระดับธีมเพื่อให้สามารถใช้ประเภทของเหลวกับองค์ประกอบและบล็อกเฉพาะได้โดยตรงในเครื่องมือแก้ไขบล็อก CSS-Tricks ได้รับการตะโกนออกมาใน ดึงคำขอ ที่ผสานคุณสมบัติ

งานนั้นกลายเป็นส่วนหนึ่งของ WordPress Core ใน เวิร์ดเพรส 6.1. Rich Tabor หนึ่งในผู้สนับสนุนก่อนหน้านี้เกี่ยวกับการพิมพ์ของเหลวใน Block Editor กล่าวว่า:

[Fluid typography] ก็เป็นส่วนหนึ่งของการทำให้ WordPress มีประสิทธิภาพมากขึ้น โดยที่ไม่ซับซ้อน (ซึ่งเราทุกคนรู้ว่าค่อนข้างท้าทาย) […] การพิมพ์แบบไหลใช้งานได้ดี อันที่จริงฉันคิดว่ามันใช้งานได้ดี

ทำให้โพสต์ WordPress ไฮไลท์ แนวทางที่นำมาใช้เพื่อสนับสนุนคุณลักษณะที่ระดับบล็อกเพื่อให้ขนาดแบบอักษรของไหลถูกนำไปใช้กับบล็อกแบบไดนามิกโดยค่าเริ่มต้น มี ประโยชน์บางอย่าง แน่นอนว่าสิ่งนี้:

• เป็นวิธีการสำหรับผู้เขียนธีมเพื่อเปิดใช้งานการพิมพ์แบบไหลโดยไม่ต้องกังวลเกี่ยวกับการใช้งานในโค้ด
• ใช้การพิมพ์แบบไหลกับเอนทิตีการพิมพ์เฉพาะ เช่น องค์ประกอบหรือบล็อกในลักษณะที่สามารถบำรุงรักษาและนำกลับมาใช้ใหม่ได้
• ช่วยให้มีความยืดหยุ่นในแง่ของหน่วยขนาดตัวอักษร (เช่น px, rem, emและ %).

ในตอนนี้ คุณลักษณะใหม่นี้มีให้ใช้งานใน WordPress Block Editor โดยค่าเริ่มต้นแล้ว ผู้เขียนธีมสามารถใช้การพิมพ์ของเหลวแบบเดียวกันได้โดยไม่ต้องเขียนโค้ดเพิ่มเติม

บล็อกที่รองรับการตั้งค่าการพิมพ์และการเว้นวรรค

Gutenberg 14.1 ออกเมื่อ 16 กันยายน 2022และแนะนำการตั้งค่าการพิมพ์ในกลุ่มบล็อก นั่นหมายความว่าการตั้งค่าข้อความสำหรับบล็อกเหล่านั้นเคยตั้งค่าเป็น CSS มาก่อนและต้องเปลี่ยนใน CSS ด้วย แต่ตอนนี้บล็อกเหล่านั้นมีการควบคุมแบบอักษรและระยะห่างในอินเทอร์เฟซตัวแก้ไขบล็อก

ขณะนี้งานนั้นถูกกำหนดให้เพิ่มใน WordPress 6.1 ตามรายละเอียดใน ทำบล็อก WordPress นี้. และด้วยจำนวนบล็อกที่เพิ่มขึ้นซึ่งรองรับการพิมพ์

ประกาศประเภทของเหลวในธีมบล็อก WordPress

ดังนั้นเราจะนำรูปแบบตัวอักษรแบบใหม่นี้ไปใช้ใน WordPress ได้อย่างไร? คำตอบอยู่ใน theme.jsonไฟล์ใหม่-ish เฉพาะสำหรับบล็อกธีมที่มีการกำหนดค่าธีมจำนวนมากในคู่คีย์:ค่า

ลองดูกฎสำหรับแบบอักษรขนาดใหญ่ใน theme.json ที่ไหน contentSize: 768px และเรากำลังทำงานร่วมกับ a widesize: 1600px เค้าโครง นี่คือวิธีที่เราสามารถระบุ CSS font-size โดยใช้โปรแกรม clamp() ฟังก์ชั่น:

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}

ใน WordPress 6.1 เท่านั้น rem, em และ px หน่วยได้รับการสนับสนุน

นั่นยอดเยี่ยมและใช้งานได้ แต่ด้วยคุณสมบัติประเภทของเหลวใหม่ เราจะใช้แนวทางที่แตกต่างออกไป อันดับแรก เราเลือกใช้การพิมพ์แบบไหลบน settings.typographyซึ่งมีรูปแบบใหม่ fluid คุณสมบัติ:

"settings": {
  "typography": {
    "fluid": true
  }
}

จากนั้นเราระบุ .ของเรา settings.fontSizes เหมือนเดิมแต่กับใหม่ fluidSize คุณสมบัติที่เราสามารถตั้งค่า min และ max ค่าขนาดสำหรับช่วงประเภทของเหลวของเรา

"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [ 
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}

แค่นั้นจริงๆ เราเพิ่งเพิ่มประเภทของเหลวให้กับขนาดแบบอักษรที่เรียกว่า "ใหญ่" โดยมีช่วงเริ่มต้นที่ 2.25rem และขยายได้ถึง 3rem. ตอนนี้ เราสามารถใช้แบบอักษร "ใหญ่" กับบล็อกใดก็ได้ที่มีการตั้งค่าแบบอักษร

มันทำงานอย่างไรภายใต้ประทุน? Rich Tabor ให้คำอธิบายที่ดีเช่นเดียวกับ คำขอดึงนี้ใน GitHub. กล่าวโดยย่อ WordPress แปลง theme.json คุณสมบัติเป็นกฎ CSS ต่อไปนี้:

.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}

…ซึ่งใช้กับองค์ประกอบ เช่น Paragraph Block:

...

ในตอนแรก ฉันพบว่ามันยากที่จะเข้าใจและรวมเอาแนวคิดของ CSS . ไว้ในใจ clamp() ทำงานโดยไม่ต้องเรียนรู้เกี่ยวกับ min(), max()และ calc() ฟังก์ชั่น เครื่องมือเครื่องคิดเลขนี้ ช่วยฉันได้ไม่น้อย โดยเฉพาะการกำหนดว่าจะใช้ค่าใดในโครงการธีมของฉันเอง

เพื่อจุดประสงค์ในการสาธิต ให้ใช้เครื่องคิดเลขเพื่อกำหนด .ของเรา font-size ช่วงเพื่อให้ขนาดเป็น 36px ที่ 768px ความกว้างของวิวพอร์ตและ 48px ที่ 1600px ความกว้างของวิวพอร์ต

เครื่องคิดเลขจะสร้าง CSS ต่อไปนี้โดยอัตโนมัติ:

/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);

เครื่องคิดเลขมีตัวเลือกให้เลือกหน่วยอินพุตเป็น px, remและ em. ถ้าเราเลือก rem หน่วย เครื่องคิดเลขสร้างสิ่งต่อไปนี้ clamp() ราคา:

/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);

ดังนั้นค่าต่ำสุดและสูงสุดเหล่านั้นจึงสอดคล้องกับค่า fluidSize.min และ fluidSize.max ค่าใน theme.json. min ค่าถูกนำไปใช้ที่วิวพอร์ตที่เป็น 768px กว้างและด้านล่าง จากนั้น font-size ขยายใหญ่ขึ้นเมื่อความกว้างของวิวพอร์ตเพิ่มขึ้น ถ้าวิวพอร์ตกว้างกว่า 1600pxที่ max ถูกนำไปใช้และ font-size ถูกต่อยอดอยู่ที่นั่น

ตัวอย่าง

มี คำแนะนำการทดสอบโดยละเอียด ใน Pull Request ที่รวมเข้าด้วยกันซึ่งแนะนำคุณลักษณะนี้ มีคำแนะนำการทดสอบเพิ่มเติมจาก โพสต์ก่อนเผยแพร่ของ Justin Tadlock บน Make WordPress.

ตัวอย่างที่ 1: การตั้งค่าการตั้งค่าแบบอักษรของเหลวใหม่

เริ่มต้นด้วยชุดคำสั่งของจัสติน ฉันใช้ในเวอร์ชันที่แก้ไขแล้วของค่าเริ่มต้น ธีมยี่สิบยี่สิบสาม ที่อยู่ระหว่างการพัฒนา

อันดับแรก ตรวจสอบให้แน่ใจว่าเราใช้ปลั๊กอิน Gutenberg (13.8 ขึ้นไป) หรือ WordPress 6.1 จากนั้นเลือกใช้ประเภทของเหลวบน settings.typography.fluid ทรัพย์สินใน theme.json ไฟล์:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
    }
  }
}

ตอนนี้ขอวาง settings.typography.fontSizes ตัวอย่างในนั้น:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
      "fontSizes": [
        {
          "name": "Normal",
          "size": "1.125rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal"
        }
      ]
    }
  }
}

หากทุกอย่างทำงานอย่างถูกต้อง ตอนนี้เราสามารถไปที่ WordPress Block Editor และใช้การตั้งค่าแบบอักษร "ปกติ" กับบล็อกของเรา:

ดี! และถ้าเราบันทึกและตรวจสอบองค์ประกอบนั้นที่ส่วนหน้า นี่คือมาร์กอัป:

ดีมาก. ทีนี้มาตรวจสอบให้แน่ใจว่า CSS มีอยู่จริง:

ดีดี. มาเปิดเผยคุณสมบัติที่กำหนดเองของ CSS เพื่อดูว่ามันเป็นของจริงหรือไม่:

ดูเหมือนว่าทุกอย่างจะทำงานตามที่เราต้องการ! ลองดูตัวอย่างอื่น…

ตัวอย่างที่ 2: ไม่รวมการตั้งค่าแบบอักษรจากของเหลวประเภท

คราวนี้มาติดตาม คำแนะนำจาก Pull Request ที่รวมเข้าด้วยกัน ด้วยการพยักหน้าให้กับตัวอย่างนี้โดย Carolina Nymark ซึ่งแสดงให้เห็นว่าเราสามารถปิดใช้งานประเภทของเหลวในการตั้งค่าแบบอักษรเฉพาะได้อย่างไร

ฉันใช้ ธีมเปล่า ตามคำแนะนำในคำแนะนำและเปิด theme.json ไฟล์สำหรับการทดสอบ อันดับแรก เราเลือกใช้ประเภทของเหลวเหมือนกับที่เคยทำมา:

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1000px"
    },
    "typography": {
      "fluid": true
    }
  }
}

คราวนี้เรากำลังทำงานกับที่เล็กกว่า wideSize ค่าของ 1000px แทน 1600px. สิ่งนี้จะช่วยให้เราเห็นประเภทของของเหลวทำงานในช่วงที่แน่นอน

ตกลงเพื่อกำหนดขนาดแบบอักษรที่กำหนดเองภายใต้ settings.typography.fontSizes:

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "size": ".875rem",
          "fluid": {
            "min": "0.875rem",
            "max": "1rem"
        },
          "slug": "small",
          "name": "Small"
        },
        {
          "size": "1rem",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          },
          "slug": "normal",
          "name": "Normal"
        },
        {
          "size": "1.5rem",
          "fluid": {
            "min": "1.5rem",
            "max": "2rem"
          },
          "slug": "large",
          "name": "Large"
        },
        {
          "size": "2.25rem",
          "fluid": false,
          "slug": "x-large",
          "name": "Extra large"
        }
      ]
    }
  }
}

โปรดทราบว่าเราได้ใช้คุณลักษณะประเภทของเหลวเฉพาะกับการตั้งค่าแบบอักษร "ปกติ" "ปานกลาง" และ "ใหญ่" “ขนาดใหญ่พิเศษ” เป็นสิ่งที่แปลกที่ fluid วัตถุถูกตั้งค่าเป็น false.

WordPress ทำอะไรจากที่นี่ — ผ่าน the เครื่องยนต์สไตล์กูเทนเบิร์ก — คือการใช้คุณสมบัติที่เราตั้งค่าเป็น CSS clamp() ฟังก์ชันสำหรับการตั้งค่าขนาดแบบอักษรแต่ละรายการที่เลือกเป็นแบบไหลและค่าขนาดเดียวสำหรับการตั้งค่าขนาดใหญ่พิเศษ:

--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;

ตรวจสอบมาร์กอัปที่ส่วนหน้า:

การเริ่มต้นที่ดี! มายืนยันว่า .has-x-large-font-size คลาสไม่รวมอยู่ในประเภทของเหลว:

ถ้าเราเปิดเผย --wp--preset--font-size--x-large ตัวแปรเราจะเห็นว่ามันถูกตั้งค่าเป็น 2.25rem.

นั่นคือสิ่งที่เราต้องการ!

บล็อกธีมที่รองรับการพิมพ์ของเหลว

ธีม WordPress จำนวนมากใช้ประโยชน์จาก clamp() ฟังก์ชันสำหรับประเภทของเหลวทั้งในรูปแบบบล็อกและคลาสสิก ตัวอย่างที่ดีของการใช้ตัวพิมพ์ของเหลวคือตัวอย่างที่เพิ่งเปิดตัว ธีมเริ่มต้นยี่สิบสาม.

ฉันได้ตรวจสอบธีมบล็อกทั้งหมดจาก ไดเร็กทอรีธีมบล็อก WordPress, การตรวจสอบ theme.json ของแต่ละธีมและดูจำนวนบล็อกธีมที่รองรับการพิมพ์แบบไหล - ไม่ใช่คุณสมบัติใหม่เนื่องจากยังอยู่ในปลั๊กอิน Gutenberg ในขณะที่เขียนนี้ - โดยใช้ CSS clamp() การทำงาน. จาก 146 ธีมที่ฉันตรวจสอบ ส่วนใหญ่ใช้a clamp() ฟังก์ชันกำหนดระยะห่าง ใช้ไปเกินครึ่งนิดหน่อย clamp() เพื่อกำหนดขนาดตัวอักษร ดิ Alara ธีมเดียวเท่านั้นที่ใช้ clamp() เพื่อกำหนด ขนาดคอนเทนเนอร์เค้าโครง.

เป็นที่เข้าใจได้ว่ามีเพียงไม่กี่ธีมที่เพิ่งเปิดตัวเท่านั้นที่มีคุณลักษณะการพิมพ์แบบไหลใหม่ แต่นี่คือสิ่งที่ฉันพบว่ากำหนดไว้ใน theme.json:

และถ้าคุณอ่านโพสต์ก่อนหน้าของฉันที่นี่ใน CSS-Tricks, the TT2 โกเฟอร์บล็อก ธีมที่ฉันใช้สำหรับการสาธิตยังได้รับการอัปเดตเพื่อรองรับคุณสมบัติการพิมพ์แบบไหล

ปฏิกิริยาที่เลือกต่อคุณสมบัติการพิมพ์ของเหลวของ WordPress

การมีรูปแบบตัวอักษรที่ลื่นไหลใน WordPress ที่ระดับการตั้งค่านั้นน่าตื่นเต้นมาก! ฉันคิดว่าฉันจะแบ่งปันความคิดบางอย่างจากผู้คนในชุมชนนักพัฒนา WordPress ที่ได้แสดงความคิดเห็น

Matias Ventura หัวหน้าสถาปนิกของโครงการ Gutenberg:

หนึ่งในคุณสมบัติล่าสุดของ Gutenberg ที่ฉันโปรดปรานคือแบบไหลซึ่งหวังว่าจะ "ใช้งานได้" พร้อมสำหรับการทดสอบใน 13.8 pic.twitter.com/9SLUgEg4pF

— Matias Ventura (@matias_ventura) สิงหาคม 4, 2022

เศรษฐีทาบอร์:

ในฐานะที่เป็นหนึ่งในความพยายามที่ใหญ่กว่าในการเผยแพร่หน้าเว็บที่สวยงามสวยงามใน WordPress การพิมพ์แบบไหลเป็นประสบการณ์ที่ยอดเยี่ยมสำหรับทั้งผู้สร้างด้วย WordPress และผู้ที่บริโภคเนื้อหา

นักพัฒนาอัตโนมัติ รามอน ดอดด์ แสดงความคิดเห็น ในคำขอดึง:

เปรียบเทียบแนวคิดนั้นด้วยขนาดแบบอักษรที่ตอบสนองต่อขนาดวิวพอร์ตเฉพาะ เช่น ขนาดที่กำหนดโดย คำถามสื่อแต่อย่าทำอะไรระหว่างขนาดเหล่านั้น theme.json อนุญาตให้ผู้เขียนแทรกค่าขนาดฟอนต์ของตัวเองแล้ว สิ่งนี้จะไม่เปลี่ยนแปลง แต่การประชาสัมพันธ์นี้เสนอให้กับผู้ที่ไม่ต้องการกังวลเกี่ยวกับรายละเอียดการใช้งาน

นิค ครอฟต์ผู้เขียน GenesisWP:

จะไม่โกหก ฉันคิดว่านี่เป็นฟีเจอร์ที่ฉันตื่นเต้นที่สุด กำลังใช้แคลมป์ทำสิ่งนี้ แต่ไวยากรณ์ดูง่ายกว่าสำหรับคนทั่วไปของคุณ

— นิคครอฟต์ (@Nick_theGeek) September 1, 2022

ไบรอัน การ์เนอร์, ผู้ออกแบบและผู้สนับสนุนหลักนักพัฒนาที่ WPEngine:

Fluid Typography เป็นการปรับปรุงอย่างมากสำหรับ #WordPress. ธีม FSE สามารถทดลองใช้งานได้ผ่านปลั๊กอิน Gutenberg แต่เราจะเห็นการสนับสนุนอย่างเป็นทางการใน 6.1 ในฤดูใบไม้ร่วงนี้ นี่คือลักษณะ/การทำงาน: pic.twitter.com/Jc7gHdyz5R

— ไบรอันการ์ดเนอร์ (@bgardner) September 1, 2022

นักพัฒนาไม่กี่คน คิด คุณลักษณะบางอย่างควรเป็นแบบเลือกใช้ เจสัน คริส ของ Automattic พูดว่า:

ฉันชอบพลังของการพิมพ์แบบไหล แต่ฉันก็ไม่เชื่อว่าควรเปิดใช้งานโดยค่าเริ่มต้น การใช้งาน (และรายละเอียดของมัน) เป็นการตัดสินใจในการออกแบบที่สำคัญซึ่งควรทำอย่างระมัดระวัง

นอกจากนี้คุณยังสามารถค้นหาความคิดเห็นเพิ่มเติมในทางการ คำแนะนำการทดสอบ testing สำหรับคุณสมบัติ

ตัดขึ้น

คุณลักษณะการพิมพ์ของเหลวใน WordPress คือ ยังอยู่ในระหว่างการพัฒนา ในขณะที่เขียนนี้ ดังนั้น ในตอนนี้ ผู้เขียนธีมควรใช้งานต่อไป แต่ด้วยความระมัดระวังและคาดหวังการเปลี่ยนแปลงที่อาจเกิดขึ้นก่อนที่จะเปิดตัวอย่างเป็นทางการ จัสตินเตือน ผู้เขียนธีมที่ใช้คุณลักษณะนี้และแนะนำให้จับตาดูปัญหา GitHub สองประเด็นต่อไปนี้:

ยังมีอีกเยอะครับ งานต่อเนื่อง เกี่ยวกับการออกแบบตัวอักษรและเครื่องมือ WordPress อื่น ๆ ที่เกี่ยวข้องกับการออกแบบ สนใจดูทางนี้ การติดตามการพิมพ์ตั๋ว GitHub ตั๋ว และ เครื่องมือออกแบบที่เกี่ยวข้องกับปัญหา GitHub.

แหล่งข้อมูล

ฉันใช้บทความต่อไปนี้เมื่อค้นคว้าเกี่ยวกับประเภทของไหลและวิธีที่ WordPress ใช้งานมันเป็นคุณสมบัติ

บทแนะนำและความคิดเห็น

CSS-เคล็ดลับ

calc() และฟังก์ชัน CSS ที่เกี่ยวข้อง