`overflow` at `contain` na Mga Katangian
Ang artikulong ito ay nagpapaliwanag sa mga katangian ng overflow at contain.
Matututo kang ilarawan ang mga bagay tulad ng pagpapakita ng mga scrollbar at clipping gamit ang katangiang overflow.
YouTube Video
HTML para sa Preview
css-overflow-contain.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-overflow-contain.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Overflow Content</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Overflow And Contain Properties</h2>
20 </header>
21 <article>
22 <h3>overflow</h3>
23 <section>
24 <header><h4>overflow: visible</h4></header>
25 <section class="sample-view">
26 <section class="overflow-visible">
27 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
28 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
29 </section>
30 </section>
31 <header><h4>overflow: hidden</h4></header>
32 <section class="sample-view">
33 <section class="overflow-hidden">
34 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
35 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
36 </section>
37 </section>
38 <header><h4>overflow: scroll</h4></header>
39 <section class="sample-view">
40 <section class="overflow-scroll">
41 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
42 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
43 </section>
44 </section>
45 <header><h4>overflow: auto</h4></header>
46 <section class="sample-view">
47 <section class="overflow-auto">
48 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
49 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
50 </section>
51 </section>
52 <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
53 <section class="sample-view">
54 <section class="overflow-xy">
55 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
56 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
57 </section>
58 </section>
59 <header><h4>overflow: clip</h4></header>
60 <section class="sample-view">
61 <section class="overflow-clip">
62 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
63 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
64 </section>
65 </section>
66 </section>
67 </article>
68 <article>
69 <h3>contain</h3>
70 <section>
71 <header><h4>contain: layout</h4></header>
72 <section class="sample-view">
73 <section class="contain-layout">
74 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
75 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
76 </section>
77 </section>
78 <header><h4>contain: paint</h4></header>
79 <section class="sample-view">
80 <section class="contain-paint">
81 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
82 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
83 </section>
84 </section>
85 <header><h4>contain: size</h4></header>
86 <section class="sample-view">
87 <section class="contain-size">
88 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
89 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
90 </section>
91 </section>
92 <header><h4>contain: style</h4></header>
93 <section class="sample-view">
94 <section class="contain-style">
95 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
96 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
97 </section>
98 </section>
99 <header><h4>contain: content</h4></header>
100 <section class="sample-view">
101 <section class="contain-content">
102 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104 </section>
105 </section>
106 </section>
107 </article>
108 </main>
109</body>
110</html>overflow at contain na Mga Katangian
overflow
Ang overflow na katangian ng CSS ay mahalaga para kontrolin kung paano ipapakita ang mga nilalaman ng isang elemento kapag lumampas ito sa laki ng kahon nito. Karaniwan itong ginagamit upang hubugin ang layout at interface ng web page, at tumutulong sa pamamahala ng pagpapakita ng mga scrollbar, clipping, at labis na nilalaman ng elemento.
Panimula sa Katangiang overflow
Ang katangian ng overflow ay may apat na pangunahing halaga: visible, hidden, scroll, at auto.
visible
1section.overflow-visible {
2 width: 400px;
3 height: 100px;
4 overflow: visible;
5}Ang visible ang default na halaga, kung saan ang mga nilalaman ng isang elemento ay lumalampas sa laki ng kahon ngunit nananatiling nakikita. Ang mga labis na bahagi ay maaaring tumakip sa ibang mga elemento, ngunit ang mga scrollbar ay hindi partikular na ipinapakita.
Mga Tampok:
- Ang nilalaman ay ipinapakita nang walang limitasyon.
- Walang mga scrollbar na ipinapakita.
hidden
1section.overflow-hidden {
2 width: 400px;
3 height: 100px;
4 overflow: hidden;
5}Ang hidden ay isang setting kung saan ang mga labis na bahagi ng nilalaman ng isang elemento ay hindi ipinapakita kapag lumampas ito sa laki ng kahon. Walang scrollbar na ipinapakita, at ang labis na nilalaman ay hindi makikita.
Mga Tampok:
- Kapag lumampas ang nilalaman sa hangganan ng elemento, ang labis na bahagi ay itinatago.
- Walang mga scrollbar na ipinapakita.
scroll
1section.overflow-scroll {
2 width: 400px;
3 height: 100px;
4 overflow: scroll;
5}Kapag ginamit ang scroll, ang mga scrollbar ay ipinapakita nang sapilitan kung ang nilalaman ng elemento ay lampas sa kahon. Kahit na ang nilalaman ay hindi lumampas, ang mga scrollbar ay laging ipinapakita.
Mga Tampok:
- Ang mga scrollbar ay ipinapakita kahit na ang nilalaman ay kasya sa hangganan ng elemento.
- Ang pag-scroll ay maaaring gawin nang pahalang at patayo.
auto
1section.overflow-auto {
2 width: 400px;
3 height: 100px;
4 overflow: auto;
5}Ang auto ay nagpapakita lamang ng mga scrollbar kapag ang nilalaman ay lumampas; kung kasya ang nilalaman sa kahon ng elemento, walang scrollbar na ipinapakita.
Mga Tampok:
- Ang mga scrollbar ay lumalabas lamang kapag lumampas ang nilalaman.
- Awtomatikong lumilikha ng scrollable na lugar.
overflow-x at overflow-y
1section.overflow-xy {
2 width: 400px;
3 height: 100px;
4 overflow-x: scroll;
5 overflow-y: hidden;
6}Maaaring kontrolin nang paisa-isa ang katangian ng overflow para sa pahalang (x axis) at patayong (y axis) direksyon.
Sa ganitong paraan, maaari mong gamitin ang overflow-x at overflow-y upang itakda ang pagpapakita ng mga patayo at pahalang na scrollbar nang paisa-isa.
Mga Pagsasaalang-alang para sa Overflow
Kapag ginagamit ang katangian ng overflow, may ilang bagay na kailangang pag-ingatan.
Mga epekto sa disenyo dahil sa pagpapakita ng mga scrollbar
Ang paggamit ng scroll o auto upang ipakita ang mga scrollbar ay maaaring makagulo sa kabuuang disenyo ng pahina. Lalo na, kung ang mga elemento ay nakalagay sa kanang bahagi o ibabang gilid, maaaring hindi gaanong makita ang mga ito dahil sa scrollbar.
Karaniwang kilos ng browser
Ang paraan ng pagpapakita at paggana ng mga scrollbar ay maaaring magkaiba depende sa browser. Lalo na sa pagitan ng Windows at macOS, may mga pagkakaiba sa istilo ng pagpapakita ng scrollbar na maaaring magdulot ng hindi wastong pagpapakita ng disenyo. Mahalagang magsagawa ng pagsubok sa iba’t ibang browser.
Overflow ng mga elementong anak
Kapag itinakda ang overflow: hidden sa elementong magulang, itinatago nito ang mga elementong anak na lumalampas sa kahon ng magulang. Maaari nitong maging sanhi ng hindi tamang pagpapakita ng mga pop-up at modal window.
overflow: clip (CSS Level 3)
1section.overflow-clip {
2 width: 400px;
3 height: 100px;
4 overflow: clip;
5}Sa bagong spesipikasyon ng CSS, ipinakilala rin ang halagang tinatawag na overflow: clip. Katulad ito ng hidden, pero hindi nito pinapayagan ang pag-scroll at pinuputol lamang ang nilalaman. Sa kasalukuyan, sinusuportahan lamang ito ng ilang browser.
Mga Tampok:
- Kung lumabis ang nilalaman, ang bahaging iyon ay ganap na matatago.
- Walang mga scrollbar na ipinapakita.
Konklusyon
Ang CSS overflow na katangian ay mahalagang kagamitan para sa pagkontrol ng pagpapakita ng nilalaman sa web design. Sa pamamagitan ng pamamahala ng mga sitwasyon kung saan lumalampas ang nilalaman sa kahon ng elemento at tamang paglalagay ng scrollbar o clipping, nakapagbibigay ito ng mas user-friendly na interface para sa mga gumagamit. Bukod pa rito, ang paggamit ng overflow-x at overflow-y ay nagbibigay-daan sa mas detalyado at maayos na kontrol.
Sa halagang ito, ang mga scrollbar ay sapilitang ipinapakita kapag lumampas ang nilalaman ng elemento sa kahon. Kahit na ang nilalaman ay hindi lumampas, ang mga scrollbar ay laging ipinapakita.
contain
Pangkalahatang-ideya ng property na contain
Ang property na contain sa CSS ay nililimitahan ang epekto ng isang elemento sa ibang elemento at sa buong pahina, na ina-optimize ang proseso ng pag-render ng browser. Partikular, nililimitahan nito ang mga reflows at repaints sa pamamagitan ng pagpigil sa mga pagbabago sa estilo o layout ng isang elemento na makaapekto sa nilalaman sa labas ng elementong iyon.
Mahalaga ito para sa performance ng web page at partikular na epektibo ito para sa mga website na may mga kumplikadong layout o maraming nilalaman.
Mga halaga para sa contain
Ang property na contain ay may mga sumusunod na halaga:.
layout
1section.contain-layout {
2 width: 300px;
3 height: 300px;
4 contain: layout;
5}Ang layout ay naglalapat ng mga limitasyon na may kaugnayan sa layout. Sa paggamit ng halagang ito, ang laki at posisyon ng isang elemento ay hindi naaapektuhan ang ibang mga elemento. Halimbawa, kahit na ang isang elemento ay muling baguhin ang laki sa loob, ang pagbabagong iyon ay hindi makaapekto sa panlabas na layout.
paint
1section.contain-paint {
2 width: 300px;
3 height: 300px;
4 contain: paint;
5}Ang paint ay nililimitahan ang epekto ng pagpipinta (drawing). Kapag tinukoy ang halagang ito, ang pagpipinta sa loob ng elemento ay hindi na nakakaapekto sa mga panlabas na elemento, kaya nililimitahan ang saklaw ng mga kalkulasyon ng repaint.
size
1section.contain-size {
2 width: 300px;
3 height: 300px;
4 contain: size;
5}Ang size ay tinitiyak na ang laki ng elemento ay hindi nakadepende sa mga panlabas na elemento. Partikular, pinipigilan nito ang pagbabago ng laki ng mga child element mula sa makaapekto sa laki ng parent element, kaya pinapalakas ang katatagan ng layout.
style
1section.contain-style {
2 width: 300px;
3 height: 300px;
4 contain: style;
5}Ang style ay tinitiyak na ang estilo ng isang elemento ay hindi nakakaapekto sa mga panlabas na elemento. Halimbawa, sa pagtukoy ng contain: style;, tinitiyak na ang mga pagbabago sa estilo ng elementong iyon ay hindi makaapekto sa ibang mga elemento, na nagbabawas ng saklaw ng mga muling kalkulasyon.
content
1section.contain-content {
2 width: 300px;
3 height: 300px;
4 contain: content;
5}Ang content ay isang composite na halaga na naglalapat ng layout, paint, size, at style. Sa paggamit nito, maaari mong tiyakin na ang layout, drawing, laki, at estilo ng elemento ay walang epekto sa mga panlabas na elemento.
Mga benepisyo sa performance
Ang pangunahing dahilan sa paggamit ng property na contain ay upang mapabuti ang performance ng web page. Partikular, ito ay epektibo sa mga sumusunod na sitwasyon.
-
Optimization ng Reflow: Kapag nagbago ang laki o layout ng isang elemento, ang epekto nito ay maaaring limitado sa pinakamaliit na posibleng saklaw. Ito ay nagpapabawas sa saklaw ng mga hindi kinakailangang reflow (pagkalkula ng layout) at nagpapagaang ng trabaho ng browser.
-
Pagbawas ng Repaits: Sa pamamagitan ng paglilimita sa lugar ng pagpipinta, ang bahagi na kailangang muling i-repaint kapag nagbago ang istilo o nilalaman ng isang elemento ay maaaring mabawasan.
-
Component-based Development: Dahil ang bawat bahagi o module ay gumagana nang hiwalay mula sa ibang mga elemento, pinapabuti nito ang performance ng bawat bahagi kahit sa malawakang web applications.
Mga Tala
Kapag gumagamit ng property na contain, dapat tandaan ang mga sumusunod na puntos.
-
Pag-unawa sa Saklaw ng Aplikasyon: Ang property na
containay kapaki-pakinabang para sa pag-optimize ng performance, ngunit hindi ito dapat ilapat sa bawat elemento. Mahalagang gamitin ito nang tama sa angkop na mga lugar. Halimbawa, ang paggamit nito sa mga elementong madalas magbago o bahagi ng malaking DOM na istruktura ay maaaring magresulta sa pagbaba ng performance. -
Pagkakatugma sa Browser: Ang property na
containay isang medyo bagong tampok sa CSS at hindi pa ganap na sinusuportahan ng lahat ng browser. Sinusuportahan ito ng mga pangunahing browser (Chrome, Firefox, Edge, Safari), ngunit maaaring hindi ito gumana sa mas lumang bersyon.
Konklusyon
Ang CSS contain na property ay isang makapangyarihang kasangkapan para sa pag-optimize ng performance ng mga pahina at aplikasyon sa web. Sa pamamagitan ng paglilimita sa epekto ng isang tiyak na elemento sa iba, nababawasan ang gastos sa reflow at repaint, na nagpapabilis sa kabuuang proseso ng rendering. Gayunpaman, mahalaga na maingat na isaalang-alang kung saan ito ilalapat at gamitin ito nang tama.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.