Κανόνες at (at rules)

Οι κανόνες at @ προσθέτουν οδηγίες και πληροφορίες σε ένα έγγραφο css.

Όλοι οι κανόνες συντάσσονται με το πρόθεμα at @.

Βασικοί κανόνες at

@charset

Ορίζει την κωδικοποίηση κειμένου (character set encoding)

Παράδειγμα
@charset "utf-8";

Το @charset πρέπει να βρίσκεται στην πρώτη γραμμή και να μην προηγείται ούτε χαρακτήρας.

@import

Εισάγει αρχείο css.

Παράδειγμα
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
					

Το @import πρέπει να προηγείται από τους άλλους κανόνες με εξαίρεση τον κανόνα @charset που πρέπει να βρίσκεται πάντα πρώτος.

Δέχεται δύο παραμέτρους, το αρχείο (με τη διαδρομή) και προαιρετικά το μέσο (media).

@namespace

Ορίζει ονόματα χώρου (namespaces) για XML περιεχόμενα όπως svg.

Παράδειγμα
@namespace svg url(http://www.w3.org/2000/svg);

Το @namespace πρέπει να βρίσκεται μετά το @import και πριν από τους άλλους κανόνες.

Υπο-συνθήκη κανόνες

Με τους υπο-συνθήκη κανόνες ένα σετ από εντολές εκτελείται αν η συνθήκη ικανοποιείται. Αν είναι δηλαδή true ή false.

@media

Θέτει συνθήκη σχετικά με το μέσον και τις διαστάσεις (media queries).

Παραδείγματα
@media screen {
	body {
		font-size: 13px;
	}
}
@media screen and (min-width: 900px) {
	article {
		padding: 1rem 3rem;
	}
}

@supports

Θέτει συνθήκη σχετικά με το αν υποστηρίζεται ή όχι κάποια ή κάποιες εντολές.

Μπορεί να συνδυαστεί με το λογικό AND ή/και OR.

Παραδείγματα
@supports (display: grid) {
	div {
		display: grid;
	}
}
@supports not (display: grid) {
	div {
		float: right;
	}
}
@supports (display: grid) and (not (display: inline-grid)) {
	...
}
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
	...
}

@font-face

Ορίζει προσαρμοσμένη γραμματοσειρά που θέλουμε να χρησιμοποιήσουμε και η οποία μπορεί να ληφθεί (download) τοπικά με τη συνάρτηση local() ή διαδικτυακά με τη συνάρτηση url().

Παίρνει δύο βασικές παραμέτρους, την font-family με την οποία ορίζεται το όνομα όπως αυτό θα χρησιμοποιηθεί στο έγγραφο και την src με την οποίο δίνουμε διεύθυνση ή εναλλακτικές διευθύνσεις λήψης της γραμματοσειράς.

Μπορούν επίσης να προστεθούν και άλλες ιδιότητες σχετικές με font όπως font-weight, font-size κλπ.

Παραδείγματα
@font-face {
	font-family: "Open Sans";
	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
		url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
@font-face {
	font-family: MyHelvetica;
	src: local("Helvetica Neue Bold"),
		local("HelveticaNeue-Bold"),
		url(MgOpenModernaBold.ttf);
	font-weight: bold;
}
Σημειώσεις

Η μορφή (format) της γραμματοσειρά ορίζεται από το αντίστοιχο MIME-type που μπορεί να είναι:

  • font/ttf (TrueType)
  • font/otf (OpenType)
  • font/woff (Web Open File Format)
  • font/woff2 (Web Open File Format 2)

Κανόνες σε ένθεση (nested rules)

Μπορούμε να συνδυάσουμε @supports και @media σε ένθεση.

Παράδειγμα
@supports (display: flex) {
	@media screen and (min-width: 900px) {
		article {
			display: flex;
		}
	}
}