CSS კონტურები უფრო მეტია ვიდრე საზღვარი
CSS განტოტვილი ქონების დამაბნეველი ქონება. როცა პირველად გაიგებთ ამის შესახებ, ძნელია იმის გაგება, თუ როგორ არის საზღვართან დისტანციურად განსხვავებული საზღვარი. W3C განმარტავს, რომ მას აქვს შემდეგი განსხვავებები:
- კონტურები არ აიღებს სივრცეში.
- კონტურები შეიძლება არასტანდარტული იყოს.
კონტურები არ აიღებს სივრცეში
ეს განცხადება, თავისთავად და დამაბნეველია. როგორ შეიძლება ობიექტი თქვენს ვებ გვერდზე არ აიღოს სივრცეში ვებ გვერდზე? მაგრამ თუ ფიქრობთ, რომ თქვენი ვებ გვერდი როგორც ხახვი, თითოეული პუნქტი გვერდზე შეიძლება იყოს ფენიანი თავზე სხვა ნივთი. კონტური საკუთრება არ იშლება სივრცეში, რადგან იგი ყოველთვის განთავსებულია ელემენტის ყუთში.
როდესაც კონტური არის განთავსებული გარშემო ელემენტს, მას არ აქვს რაიმე გავლენა, თუ როგორ ეს ელემენტი ასახული გვერდზე. არ შეცვლის ელემენტის ზომა ან პოზიცია. თუ ელემენტს ასახავს, ის იმავე ოდენობას მიიღებს, თითქოს არ გქონდათ ამ ელემენტის კონტური. ეს არ არის სიმართლე საზღვარი. ელემენტის საზღვარი ემატება ელემენტის გარე სიგანეს და სიმაღლეს. ასე რომ, თუ სურათს ჰქონდა 50 პიქსელი, 2-პიქსელის საზღვრებით, ეს იქნება 54 პიქსელი (2 პიქსელი თითოეულ მხარეს). იგივე სურათი, რომელიც 2-პიქსელ კონტურზე იქნება, მხოლოდ 50 პიქსელი სიგანეზე აიღებს გვერდს, გამოიფინება გამოსახულების გარედან.
კონტურები შესაძლოა არასწორი იყოს
სანამ დაიწყებთ ფიქრს "მაგარი, ახლა შემიძლია დავხაზო წრეები!" კიდევ ერთხელ დაფიქრდი. ამ განცხადებას სხვა მნიშვნელობა აქვს, ვიდრე შეიძლება ფიქრობთ. ელემენტის ელემენტზე ყოფნისას ბრაუზერი ამ ელემენტს განიხილავს იმ ელემენტს, თითქოს ერთი გიგანტური მართკუთხა ყუთია. თუ ყუთი გაყრილია რამდენიმე ხაზით, ბრაუზერი მხოლოდ ღიაა კიდეებს, რადგან ყუთი არ არის დახურული. თითქოს ბრაუზერი საზღვრებს უსასრულოდ ფართო ეკრანზე ხედავს - ეს საზღვრისთვის საკმარისია ერთი უწყვეტი მართკუთხედი.
ამის საპირისპიროდ, განტოტვილი ქონების გადაღება ითვალისწინებს. თუ ხაზგასმული ელემენტია რამდენიმე ხაზი, ხაზს უსვამს ხაზის ბოლოს და განაგრძობს მომდევნო ხაზს. თუ შესაძლებელია, გამონაკლისი დარჩება სრულად დაკავშირებული, ასევე არასტანდარტული ფორმის შექმნა.
გამოყენების წესი
კონტური პირობების ერთ-ერთი საუკეთესო საშუალებაა საძიებო ტერმინები. ბევრი საიტები ამას ფონის ფერის გამოყენებით აკეთებენ, მაგრამ ასევე შეგიძლიათ გამოიყენოთ კონტური ქონების გამოყენება და არ აღელვებთ თქვენს გვერდებზე ზედმეტი ინტერვალით.
კონტური ფერი ფერი იღებს ტერმინს "ინვერტირებას", რომელიც ხაზს უსვამს ხაზს ფონური ფერი. ეს საშუალებას გაძლევთ ხაზს უსვამს ელემენტებს დინამიურ ვებ გვერდებზე იმის შესახებ, თუ რა ფერები გამოიყენება .
ასევე შეგიძლიათ გამოვიყენოთ განტოტვილი ობიექტი აქტიური კავშირების ირგვლივ წებოვანი ხაზის ამოსაღებად. ეს სტატია CSS-Tricks- იდან გვიჩვენებს, თუ როგორ ამოიღონ dotted მონახაზი.