CSS Υπολογιστική Συνδρομή Χρηστών

CSS Υπολογιστική Συνδρομή Χρηστών

Σε αυτή την ενότητα, θα μάθετε τα εξής CSS χρήσιμα χαρακτηριστικά χρήστη界面:

  • resize
  • outline-offset

Υποστήριξη περιηγητών

Τα αριθμήματα στη τάβλη επισημαίνουν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως την ιδιότητα.

Ιδιότητα Chrome IE Firefox Safari Opera
resize 4.0 Δεν υποστηρίζεται 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS ρυθμίσεις μεγέθους

resize Η ιδιότητα καθορίζει αν το στοιχείο θα πρέπει να ρυθμιστεί από τον χρήστη (και πώς).

Το στοιχείο div μπορεί να ρυθμιστεί από τον χρήστη!

Αλλαγή μεγέθους: Κάντε κλικ και σύρετε το κάτω δεξί γωνία του στοιχείου div.

Σημείωση:Ο Internet Explorer δεν υποστηρίζει την ιδιότητα resize.

Το παρακάτω παράδειγμα επιτρέπει στον χρήστη να ρυθμίσει μόνο το πλάτος του στοιχείου <div>:

Παράδειγμα

div {
  resize: horizontal;
  overflow: auto;
}

Προσπάθησε να το δοκιμάσεις!

Το παρακάτω παράδειγμα επιτρέπει στον χρήστη να ρυθμίσει μόνο το ύψος του στοιχείου <div>:

Παράδειγμα

div {
  resize: vertical;
  overflow: auto;
}

Προσπάθησε να το δοκιμάσεις!

Το παρακάτω παράδειγμα επιτρέπει στον χρήστη να ρυθμίσει το ύψος και το πλάτος του στοιχείου <div>:

Παράδειγμα

div {
  resize: both;
  overflow: auto;
}

Προσπάθησε να το δοκιμάσεις!

Σε πολλούς περιηγητές, το <textarea> είναι προεπιλεγμένο ως ρυθμιζόμενο σε μέγεθος. Εδώ, χρησιμοποιούμε την ιδιότητα resize για να απενεργοποιήσουμε αυτή τη δυνατότητα:

Παράδειγμα

textarea {
  resize: none;
}

Προσπάθησε να το δοκιμάσεις!

Αναδιάταξη Κάθετου CSS

outline-offset Η ιδιότητα προσθέτει χώρο μεταξύ της οριζόντιας γραμμής και της οριακής περιθωρίου του στοιχείου.

Αυτό το div έχει 15px οριζόντια γραμμή έξω από τα οριακά πλαίσια.

Σημείωση:Η οριζόντια γραμμή είναι διαφορετική από το οριοποιητικό πλαίσιο! Αντί για το οριοποιητικό πλαίσιο, η γραμμή οριζόντιας γραμμής σχετίζεται έξω από το οριοποιητικό πλαίσιο και μπορεί να συναντηθεί με άλλο περιεχόμενο. Επιπλέον, η οριζόντια γραμμή δεν είναι μέρος του μεγέθους του στοιχείου: η συνολική πλάτος και ύψος του στοιχείου δεν επηρεάζεται από το πλάτος της γραμμής οριζόντιας γραμμής.

Ο παρακάτω παράδειγμα χρησιμοποιεί την ιδιότητα outline-offset για να προσθέσει χώρο μεταξύ της κανονικής ορίου και της οριζόντιας γραμμής:

Παράδειγμα

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Προσπάθησε να το δοκιμάσεις!

CSS Ιδιότητες Διεπαφής Χρηστών

Η παρακάτω τаблицή περιλαμβάνει όλες τις ιδιότητες της διεπαφής χρήστη:

Ιδιότητα Περιγραφή
outline-offset Προσθέτει χώρο μεταξύ του προφίλ και των κύριων ακμών του στοιχείου.
resize Καθορίζει αν το στοιχείο μπορεί να προσαρμοστεί από τον χρήστη.