Ενότητα HTML <source> attribute

HTML <source> ετικέτα

Ορισμός και χρήση

media Η ιδιότητα αποδέχεται οποιεςδήποτε συνήθως ορίζονται μέσω CSS ιδιότητες ελέγχου ενημέρωσης.

Σημείωση:Αυτή η ιδιότητα μπορεί να δεχτεί πολλαπλές τιμές.

Παράδειγμα

Μια στοιχεία <picture> που περιέχει δύο αρχεία πηγής και μια εναλλακτική εικόνα:

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Δοκιμάστε το προσωπικά

Γλώσσα

<source media="media_query>

Πιθανοί αποτελεσμοί

Αποτελεσμοί Περιγραφή
and Ορίζει τον λογισμικό AND.
not Ορίζει τον λογισμικό NOT.
, Ορίζει τον λογισμικό OR.

Συσκευή

Τιμή Περιγραφή
all Προεπιλεγμένο. Υποστηρίζει όλες τις συσκευές.
aural Συνθετές ήχου.
braille Συσκευές ανατροφοδότησης τυφλών.
handheld Περιβάλλοντα χειριστών (μικρός οθόνης, περιορισμένη πλάτος)
projection Προβολέας.
print Προεπισκόπηση εκτύπωσης/σελίδα εκτύπωσης.
screen Οθόνη υπολογιστή.
tty Τηλετυπογραφία και παρόμοια μέσα που χρησιμοποιούν δίκτυα χαρακτήρων ίσου πλάτους.
tv Συσκευές τύπου τηλεόρασης (χαμηλή ανάλυση, περιορισμένη ικανότητα ανανέωσης σελίδας).

Τιμή

Τιμή Περιγραφή
width

Ορίζει το πλάτος της περιοχής προβολής του στόχου.

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="screen and (min-width:500px)"
height

Ορίζει το ύψος της περιοχής προβολής του στόχου.

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="screen and (max-height:700px)"
device-width

Ορίζει το πλάτος του στόχου οθόνης/χαρτών.

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="screen and (device-width:500px)"
device-height

Ορίζει το ύψος του στόχου οθόνης/χαρτών.

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="screen and (device-height:500px)"
orientation

Ορίζει τη κατεύθυνση του στόχου οθόνης/χαρτών.

Πιθανές τιμές: "portrait" ή "landscape"

Παράδειγμα: media="all and (orientation: landscape)"
aspect-ratio

Ορίζει το πλάτος/το ύψος της περιοχής προβολής του στόχου.

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Ορίζει το πλάτος/το ύψος του συστήματος εξόδου του συσκευών/χαρτών.

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="screen and (aspect-ratio:16/9)"
color

Ορίζει τον αριθμό των λογαριασμών για κάθε χρώμα του στόχου οθόνης.

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="screen and (color:3)"
color-index

Ορίζει τον αριθμό των χρωμάτων που μπορεί να χειριστεί ο στόχος οθόνης.

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="screen and (min-color-index:256)"
monochrome

Ορίζει τον αριθμό των bit ανά πιξέλ στο μονοχρωμικό βιβλιοθήκη πυξέλων.

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="screen and (monochrome:2)"
resolution

Ορίζει την πυκνότητα των εικόνων του στόχου οθόνης/χαρτιού (dpi ή dpcm).

Μπορούν να χρησιμοποιηθούν τα πρόθεσμα "min-" και "max-".

Παράδειγμα: media="print and (resolution:300dpi)"
scan

Ορίζει τον τρόπο σάρωσης του οθόνης τηλεόρασης.

Πιθανές τιμές είναι: "progressive" και "interlace".

Παράδειγμα: media="tv and (scan:interlace)"
grid

Ορίζει αν η έξοδος είναι δίκτυο ή bitmapped.

Πιθανές τιμές: "1" για δίκτυο, "0" για άλλες.

Παράδειγμα: media="handheld and (grid:1)"

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 9.0 15.0 9.1 25.0

HTML <source> ετικέτα