Როგორ გამოვიყენოთ CSS სვეტები Multi-Column Website Layouts- ისთვის

მრავალი წლის განმავლობაში, CSS floats უკვე finicky, ჯერ აუცილებელია, კომპონენტი შექმნაში ვებ ფორმატისთვის. თუ თქვენი დიზაინი მრავალჯერადი სვეტებისკენ მოუწოდებდა, თქვენ აღმოჩნდა მოძრავი . პრობლემა ამ მეთოდით არის ის, რომ მიუხედავად იმისა, რომ წარმოუდგენელი ingenuity, რომ ვებ დიზაინერებს / დეველოპერები აჩვენა შექმნის კომპლექსი საიტის ფორმატისთვის, CSS floats არასოდეს ნამდვილად იმას ნიშნავდა, რომ გამოყენებული ამ გზით.

მიუხედავად იმისა, რომ floats და CSS პოზიციონირება დარწმუნებულია, რომ აქვს ადგილი ვებ დიზაინი მრავალი წლის განმავლობაში, ახალი განლაგება ტექნიკა, მათ შორის CSS Grid და Flexbox ახლა ვაძლევთ ვებ დიზაინერებს ახალი გზები, რათა შეიქმნას მათი საიტის ფორმატისთვის. კიდევ ერთი ახალი განლაგება ტექნიკა, რომელიც გვიჩვენებს უამრავი პოტენციალი არის CSS მრავალჯერადი სვეტები.

CSS სვეტების გარშემო რამდენიმე წელია, მაგრამ ხანდაზმული ბრაუზერების მხარდაჭერა (ძირითადად, Internet Explorer- ის ხანდაზმული ვერსიები) ბევრ ვებ პროფესიონალს ინარჩუნებს ამ სტილის გამოყენებას მათი წარმოების პროცესში.

IE- ის ხანდაზმული ვერსიის მხარდაჭერის შედეგად, ზოგიერთი ვებ დიზაინერი ახლა ექსპერიმენტებს ახორციელებს ახალი CSS განლაგების ვარიანტებით, CSS სვეტების შეყვანაში, და რომ ისინი უფრო მეტ კონტროლს ახდენენ ამ ახალი მიდგომებით, ვიდრე ისინი გააკეთეს floats.

CSS სვეტების საფუძვლები

როგორც მისი სახელი ვარაუდობს, CSS მრავალჯერადი სვეტების (ასევე ცნობილია, როგორც CSS3 მრავალ სვეტი განლაგება) საშუალებას გაძლევთ გაყოფა შინაარსი კომპლექტი რაოდენობის სვეტების. ყველაზე ძირითადი CSS თვისებები, რომლითაც იყენებთ:

სვეტის დათვლისთვის, მიუთითეთ სვეტების რაოდენობა. სვეტის უფსკრული იქნება ეს სვეტების შორის გუტერები ან ინტერვალი. ბრაუზერი მიიღებს ამ ფასეულობებს და შეავსეთ შინაარსი თანაბრად თქვენს მიერ მითითებული სვეტების რიცხვში.

პრაქტიკაში CSS- ის მრავალჯერადი სვეტების საერთო მაგალითია ტექსტის შინაარსის ბლოკად გაყოფა მრავალ სვეტში, ანალოგიურად, რაც გაზეთ სტატიაში იხილავდა. ამბობენ, რომ თქვენ გაქვთ შემდეგი HTML მარკირება (გაითვალისწინეთ, რომ მაგალითისთვის, მე მხოლოდ ერთი პუნქტის დაწყებისას ვაკეთებ, ხოლო პრაქტიკაში შესაძლებელია ამ მარკირების შინაარსის მრავალ პუნქტს).

თქვენი სტატიის სათაური

წარმოიდგინეთ ტექსტის უამრავი პუნქტი აქ ...

თუ თქვენ დაწერა ამ CSS სტილის:

. კონცეფცია {-moz-column-count: 3; -ვებრიტი-სვეტის რაოდენობა: 3; სვეტის რაოდენობა: 3; -moz-column-gap: 30px; -ვებ-სვეტი-სვეტი: 30px; სვეტის ინტერვალი: 30px; }

ეს CSS წესი დაყოფს "შინაარსის" დივიზიას 3 თანაბარ სვეტში, მათ შორის 30 პიქსელიანი ინტერვალით. თუ გინდა ორი სვეტი 3-ის ნაცვლად, უბრალოდ შეცვალოთ ეს მნიშვნელობა და ბრაუზერი იმ სვეტების ახალ სიგანეებს გამოთვლიდა, რომლითაც თანაბრად გაყოფილი იქნებოდა. გაითვალისწინეთ, რომ ჩვენ ვვაჭრობთ მოვაჭრე- prefixed თვისებები პირველი, რასაც მოჰყვა არასამთავრობო prefix დეკლარაციები.

მარტივი როგორც ეს, მისი გამოყენება ამ გზით არის საეჭვო ნახვა გამოყენება. დიახ, შეგიძლიათ გაანაწილოთ რამოდენიმე სვეტის შინაარსი, მაგრამ ეს არ შეიძლება იყოს საუკეთესო კითხვის გამოცდილება ვებსათვის, განსაკუთრებით იმ შემთხვევაში, თუ ამ სვეტების სიმაღლე ეკრანზე "ჩამოთვლილია".

მკითხველს მაშინ უნდა გადაეფაროს და ქვემოთ, რათა წაიკითხოთ სრული შინაარსი. მიუხედავად ამისა, CSS სვეტების პრინციპი მარტივია, როგორც ხედავთ აქ, და ის შეიძლება გამოყენებულ იქნას იმდენად, რამდენადაც მხოლოდ რამდენიმე ნაწილის შინაარსი გაყოფილი - მას შეუძლია მართლაც გამოიყენოს განლაგება.

განლაგება CSS სვეტებისთვის

თქვით, რომ თქვენ გაქვთ ვებგვერდი შინაარსით, რომელსაც აქვს 3 სვეტის შინაარსი. ეს არის ძალიან ტიპიური ნახვა განლაგება და მივაღწიოთ იმ 3 სვეტს, რომლებშიც ჩვეულებრივ ჩამოყალიბდებიან განყოფილებები, რომლებიც ჩართულია CSS მრავალჯერადი სვეტით, ეს ბევრად უფრო ადვილია.

აქ არის რამდენიმე ნიმუში HTML:

ახალი ამბები

შინაარსი აქ წავიდოდა ...

ჩვენი ბლოგიდან

კონტენტი წავალთ აქ ...

მომავალი ღონისძიებები

p>

CSS, რათა ამ მრავალჯერადი სვეტების იწყება რა დაინახა ადრე:

. კონცეფცია {-moz-column-count: 3; -ვებრიტი-სვეტის რაოდენობა: 3; სვეტის რაოდენობა: 3; -moz-column-gap: 30px; -ვებ-სვეტი-სვეტი: 30px; სვეტის ინტერვალი: 30px; }

ახლა, გამოწვევა აქ არის ის, რომ ბრაუზერი ამ შინაარსის გაყოფას სურს, ასე რომ, თუ ამ განყოფილების შინაარსი განსხვავებულია, ეს ბრალია ფაქტობრივად გაყოფა ინდივიდუალური განყოფილების შინაარსთან და დასძენს, შემდეგ გაგრძელდება სხვა (თქვენ შეგიძლიათ ნახოთ ამ გამოყენებით კოდი გასაშვებად ექსპერიმენტი და დაამატოთ სხვადასხვა lengths შინაარსი შიგნით თითოეული სამმართველოს)!

ეს არ არის ის, რაც გინდა. თქვენ გინდათ თითოეული ამ განყოფილება, რომ შეიქმნას მკაფიო სვეტი და, რაც არ უნდა დიდი თუ პატარა ინდივიდუალური განყოფილების შინაარსი იყოს, თქვენ არასდროს არ უნდა გაყოფილი. თქვენ შეგიძლიათ მიაღწიოთ ამ დამატებით ხაზს CSS- ზე:

.content div {display: inline-block; }

ეს აიძულებს იმ სეგმენტებს, რომლებიც შიგნით "შინაარსის" შიგნით რჩება ხელსაყრელი, მიუხედავად იმისა, რომ ბრაუზერი გაყოფილია მრავალ სვეტში. კიდევ უფრო უკეთესი, რადგან ჩვენ არ მოგვცეს არაფერი ფიქსირებული სიგანე, ამ სვეტების ავტომატურად ზომის შეცვლა როგორც ბრაუზერის resizes, რაც მათ იდეალური განაცხადის საპასუხო საიტებზე . ამ "ინლაინ-ბლოკ" სტილის სტილში, თითოეული თქვენი 3 განყოფილება იქნება შინაარსის მკაფიო სვეტი.

სვეტის სიგანე

არსებობს კიდევ ერთი ქონება, გარდა "სვეტის დათვლისა", რომელიც შეგიძლიათ გამოიყენოთ და განისაზღვროს თქვენი განლაგება, ეს შეიძლება იყოს უკეთესი არჩევანი თქვენს საიტზე. ეს არის "სვეტის სიგანე". იმავე HTML მარკირების გამოყენებით, როგორც ადრე ნაჩვენები, ჩვენ შეგვიძლია ამის გაკეთება ამის ნაცვლად ჩვენი CSS:

.content {-moz-column-width: 500px; -webkit- სვეტის სიგანე: 500px; სვეტის სიგანე: 500px; -moz-column-gap: 30px; -ვებ-სვეტი-სვეტი: 30px; სვეტის ინტერვალი: 30px; }. კონცეფცია div {display: inline-block; }

ისე, რომ ეს მუშაობს, რომ ბრაუზერი იყენებს ამ "სვეტის სიგანე", როგორც ამ სვეტის მაქსიმალურ მნიშვნელობას. ასე რომ, თუ ბრაუზერის ფანჯარა 500-ზე ნაკლები პიქსელია, ეს 3 დაყოფა გამოჩნდება ერთ სვეტში, ერთ-ერთს შორის. ეს არის ტიპიური განლაგება, რომელიც გამოიყენება მობილური / პატარა ეკრანისთვის.

როგორც ბრაუზერის სიგანე იზრდება იმისათვის, რომ საკმარისი იყოს 2 სვეტის შევსება, მითითებული სვეტების ხარვეზებით, ბრაუზერი ავტომატურად მიდის ერთი სვეტის განლაგებით ორი სვეტით. შეინახეთ ეკრანის სიგანის გაზრდა და საბოლოოდ, მიიღებთ 3 სვეტის დიზაინს, თითოეულ ჩვენ 3 განყოფილებას, რომელიც ნაჩვენებია საკუთარ სვეტში. კიდევ ერთხელ, ეს არის დიდი გზა მიიღოთ გარკვეული საპასუხო, მრავალ მოწყობილობა მეგობრული სქემების და თქვენ კი არ უნდა გამოვიყენოთ მედია შეკითხვებს შეცვალოს განლაგება სტილის!

სხვა სვეტის თვისებები

გარდა ამისა, აქ მოთავსებული ობიექტების გარდა, არსებობს "სვეტების" წესი, მათ შორის ფერი, სტილი და სიგანე, რომელიც საშუალებას გაძლევთ შექმნათ წესები თქვენს სვეტებს შორის. ეს იქნება გამოყენებული საზღვრების ნაცვლად, თუ გნებავთ გარკვეული სტრიქონები თქვენი სვეტების გამიჯვნა.

ექსპერიმენტის დრო

ამჟამად, CSS მრავალჯერადი სვეტის განლაგება ძალიან კარგად არის მხარდაჭერილი. პრეფიქსებით, ინტერნეტის მომხმარებელთა 94% -ზე მეტი იქნებოდა ამ სტილის ნახვის საშუალება, და რომ არასანქცირებული ჯგუფი, მართლაც, მხოლოდ Internet Explorer- ის უფრო ძველი ვერსიები იქნებოდა, რომელიც, შესაძლოა, აღარ იქნებოდა მხარდაჭერილი.

ამ დონის მხარდაჭერა ახლა, არ არსებობს მიზეზი არ დაიწყოს ექსპერიმენტირება CSS სვეტების და განათავსოს ამ სტილის წარმოების მზად საიტები. თქვენ შეგიძლიათ დაიწყოთ ექსპერიმენტები HTML და CSS გამოყენებით ამ სტატიაში და ითამაშოთ გარშემო სხვადასხვა ღირებულებებს, თუ რა უნდა იმუშაოს თქვენი საიტის განლაგება საჭიროებებს.