Units of measurement

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Units of measurement

Δημοσίευση από apsuh0s » 16 Δεκ 2010 00:38

Καλησπέρα..

Κώδικας: Επιλογή όλων

<title>Fonts</title>
<style type="text/css">
body	&#123;
	font-family&#58;"Times New Roman", Times, serif;
	font-size&#58;100%;
&#125;
.em	&#123;
	font-size&#58;1em;
&#125;
.pixel	&#123;
	font-size&#58;16px;
&#125;
</style>
</head>

<body>
    <div class="em">    
        <p>a paragraph</p>
    </div>
    <div class="pixel">
    	<p>a paragraph</p>
    </div>
</body>
</html>
Το πρόβλημα είναι το εξής..

Όταν αλλάζω τo default font-size του firefox(3.6.13) από 16px σε μια άλλη τιμή δεν υπάρχει διαφορά στο μέγεθος της γραμματοσειράς που ανήκει στην class="em". Αντίθετα σε chrome(8.0.552.224) μου τα δέχεται κανονικά, μεγαλώνει την πρώτη παράγραφο ενώ κρατάει σταθερή την παράγραφο με τα pixels.

Καμμιά ιδέα?
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Units of measurement

Δημοσίευση από cpulse » 16 Δεκ 2010 02:07

Βάλε σταθερή τιμή στο font-size του body (px ή pt)

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Units of measurement

Δημοσίευση από apsuh0s » 16 Δεκ 2010 02:28

Δεν το λύνει το πρόβλημα.. Δηλαδή δεν απεικονίζεται κάτι διαφορετικό όταν αλλάζω τα default του firefox.

Ωστόσο διαφωνώ με τη λύση που προτείνεις, ασχέτως αποτελέσματος διότι,

η λογική πίσω από το να βάλω body {font-size:100%} είναι διότι θέλω κάθε user agent να χρησιμοποιεί 100% αυτού που έχει ως default. Το να βάλω μια τιμή με measurement type px ή pt με βγάζει από αυτή τη λογική.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Units of measurement

Δημοσίευση από apsuh0s » 16 Δεκ 2010 03:13

Πιθανότατα δεν είναι λάθος στον κώδικα, διότι όταν επιλέγω στον firefox:

Tools > Options > Content

και ξετικάρω στο advanced του Fonts & Colors το

"Allow pages to choose their own fonts, instead of my selections above"

μου αλλάζει μόνο το Font που επέλεξα, και όχι το font-size

Το μόνο συμπέρασμα στο οποίο καταλήγω είναι πως κάτι τρέχει με το firefox..

edit : Και με opera και με IE δουλεύει ο κώδικας κανονικά.. Αυξάνει το font-size στο ορισμένο ως default για την class="em" και αφήνει ανεπηρέαστο το μέγεθος της γραμματοσειράς της class="pixel"..
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Units of measurement

Δημοσίευση από cpulse » 16 Δεκ 2010 13:47

Το δοκίμασα σε firefox και σε μένα λειτουργεί κανονικά.

Αλλά.. πρακτικά τι εξυπηρετεί όλο αυτό;

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Units of measurement

Δημοσίευση από apsuh0s » 16 Δεκ 2010 14:27

Εξυπηρετεί κυρίως ανθρώπους με πρόβλημα όρασης οι οποίοι έχουν θέσει μεγαλύτερο default font size από τα 16 που έχουν οι browsers. Να βλέπουν κάθε κείμενο με τον τρόπο που αυτοί θέλουν και όχι με το δικό μου.

Εφόσον μου λες πως σε σένα δουλεύει κανονικά επιβεβαιώνονται οι υποψίες για τον firefox
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Units of measurement

Δημοσίευση από cpulse » 16 Δεκ 2010 14:45

Τα περισσότερα sites στην εποχή μας είναι γεμάτα με γραφικά που περιορίζουν τον χώρο για κείμενο. Τα περισσότερα είναι κομμένα και ραμμένα για μια συγκεκριμένη διάσταση στα fonts. Γι αυτό και τελευταία οι browsers έχουν βάλει και zoom in/out εκτώς από την αυξομείωση στο font size. Με το zoom δεν χαλάνε οι ισορροπίες που έχει προβλέψει ο designer.

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Units of measurement

Δημοσίευση από apsuh0s » 16 Δεκ 2010 15:09

Αυτό που λες συμβαίνει. Αλλά γιατί να μην το έχεις ορίσει ρητά εσύ το τι θα γίνεται?

Εξάλλου ένας designer ο οποίος δεν επένδυσε χρόνο στο να προσαρμόσει τo font-size και να το κάνει προσβάσιμο σε κάθε χρήστη δε νομίζω να επένδυσε χρόνο σε τίποτα άλλο που θα διευκόλυνε χρήστες με προβλήματα. Μόνο τα φρουφρού.. Αν και αυτά είναι καλά καμιά φορά..
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Units of measurement

Δημοσίευση από cpulse » 16 Δεκ 2010 15:14

Κάθε ιστοσελίδα έχει τον σκοπό της. Μια ιστοσελίδα ενός πανεπιστημίου που εστιάζει στο περιεχόμενο καλό είναι να χει προβλέψει τέτοια θέματα. Μια ιστοσελίδα που πουλάει ομορφιά καλό είναι να εστιάζει στο θέμα της και να αφήνει τα zoom να κάνουν τα υπόλοιπα.

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Units of measurement

Δημοσίευση από apsuh0s » 22 Δεκ 2010 03:51

cpulse, διάβασε αν έχεις χρόνο αυτό το άρθρο. Δίνει τροφή για σκέψη όσον αφορά αυτά που συζητούσαμε.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Units of measurement

Δημοσίευση από Khronos » 22 Δεκ 2010 09:46

Όταν μιλάμε για liquid layouts που εστιάζουν όπως είπε και ο cpulse στο περιεχόμενο και την ενημέρωση, αξίζει να χρησιμοποιήσεις relative units.

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

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Units of measurement

Δημοσίευση από apsuh0s » 22 Δεκ 2010 10:46

Δεν μπορώ να καταλάβω σε τι διαφέρει ένας ιστότοπος προσανατολισμένος στο περιεχόμενο και την ενημέρωση από οποιαδήποτε άλλο ιστότοπο.

Αν εννοείς κι εσύ αυτό που ανέφερε και ο cpulse σχετικά με ιστότοπους που άπτονται της εκπαίδευσης με βρίσκει αντίθετο.

Επίσης δεν μπορώ να καταλάβω γιατί δεν αξίζει τον κόπο. Τόσος κόπος είναι; Πραγματικά δεν ξέρω.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Units of measurement

Δημοσίευση από cpulse » 22 Δεκ 2010 11:10

Το διάβασα αλλά παρατηρώ οτι δεν είναι ισορροπημένο το κείμενο. Περίπου στην αρχή λέει
However, I see no reason to use pixel-sized text, and in fact I think it’s shooting yourself in the foot to do so.
Το να πάρεις θέση σε κάτι είναι καλό - κακό - αδιάφορο αλλά πάντα θεμιτό. Όμως το να διαγράψεις εντελώς μια ιδέα σημαίνει οτι δεν έχεις ανοιχτά μυαλά, κι αν δεν έχεις έστω και λίγο ανοιχτά μυαλά να δείς και λίγο ποιο μετά από την μύτη σου, δεν έχεις αξιοπιστία.

Δεν ξέρω αν έχεις δει iPhone, iPad, ή και οποιαδήποτε άλλο smartphone. Το θέμα του zoom το έχουν προσεγγίσει με multi-touch, το οποίο ποια είναι τόσο βολικό που αλλάζει πολλά.

Αν θες να πάω στην πράξη, σε ένα site που πουλάει αντικείμενα που αγοράζουν μεγαλύτεροι σε ηλικία είχαμε θέμα με τα font sizes. Είχαμε ένα γραφικό που δεν έπρεπε να αλλάξει για να μην αλλάξει και το κόστος, το οποίο όμως είχε συγκεκριμένο πλάτος για τα menu του. Από την άλλη οι μεγαλύτεροι σε ηλικία έχουν μεγάλο πρόβλημα με τα μεγέθη των fonts. Οπότε στα CSS βάλαμε μέγεθος με pixels στα menu, και με em σε όλα τα άλλα. Μετά, στο site υπάρχει ένα module που αλλάζει το font size του body, το οποίο στη συγκεκριμένη εφαρμογή αλλάζει τα πάντα εκτώς από τα menu. Έτσι κάνουμε την χάρη και στους χρήστες να αυξομειώνουν το μέγεθος αλλά μείναμε και στο περιορισμένο κόστος κατασκευής.

Γενικότερα αν κάνεις μια βόλτα στα sites θα το δεις και μόνος σου οτι πολλά δεσμεύονται σε μεγάλο ή και απόλυτο βαθμό από τα γραφικά τους. Ο τύπος στο άρθρο λογικά δεν θα χει κυκλοφορήσει και πολύ για να το έβλεπε αυτό.

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Units of measurement

Δημοσίευση από Khronos » 22 Δεκ 2010 11:24

cpulse έγραψε:Γενικότερα αν κάνεις μια βόλτα στα sites θα το δεις και μόνος σου οτι πολλά δεσμεύονται σε μεγάλο ή και απόλυτο βαθμό από τα γραφικά τους.
Ακριβώς για αυτό το λόγο θεωρώ ότι δεν αξίζει τον κόπο.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης