[JS] Έλεγχος υποστήριξης CSS ιδιότητας χωρίς browser detection

11 11 2008

Παραδείγματος χάριν, έστω ότι θέλετε να διαπιστώσετε αν υποστηρίζεται η ιδιότητα opacity. Αντί να μπλεχτείτε σε δαιδαλώδεις και μη forward-compatible λύσεις, μπορείτε απλά να ελέγξετε αν η ιδιότητα αυτή είναι ορισμένη (defined) στο αντικείμενο style οποιουδήποτε στοιχείου. Ακόμη κι αν είναι κενή, αν υποστηρίζεται, δεν υπάρχει περίπτωση να είναι undefined.

Ένα ερώτημα που προκύπτει όταν πρόκειται για επαναχρησιμοποιήσιμα scripts είναι “Σε ποιό στοιχείο να το δοκιμάσω;”. Ένας καλός υποψήφιος για αυτό είναι το body: Υπάρχει πάντα, και διαθέτει style object.

Για να συνοψίσουμε, ο τελικός έλεγχος θα ήταν της μορφής:

if(typeof document.body.style.opacity != 'undefined')
{
/* Εδώ μπορείτε να κάνετε ο,τι θέλετε που χρησιμοποιεί
την εν λόγω ιδιότητα, βέβαιοι ότι θα δουλέψει σωστά */
}

Έχετε υπόψιν ότι για το παραπάνω θα πρέπει να χρησιμοποιήσετε τη JavaScript μορφή της ιδιότητας (πχ backgroundColor και όχι background-color).


Σχόλια : Leave a Comment »
Ετικέτες: , ,
Κατηγορίες : CSS, Javascript, Web design, Web development

To fixed δαγκώνει!!

13 09 2008

Πλέον που το position:fixed; και το background-attachment:fixed υποστηρίζονται από το μεγαλύτερο ποσοστό των browsers που χρησιμοποιούν οι επισκέπτες μας, θεωρήσατε ότι μπορούν να χρησιμοποιηθούν με ασφάλεια και χωρίς προβλήματα; Ειδικά αν προβλέψετε και graceful degradation για IE6- ποιός σας πιάνει ε;

Μέγα λάθος, όπως ανακάλυψα πρόσφατα the (very) hard way… Διαβάστε την συνέχεια του άρθρου »


Σχόλια : Leave a Comment »
Ετικέτες: , , ,
Κατηγορίες : CSS

CSS.getElementsBySelector() v1.0.3

31 08 2008

Μια μικρή ενημέρωση ότι το μικρούλι js library μου έφτασε αισίως στην έκδοση 1.0.3 με τη διόρθωση ενός σημαντικού bug.

Θα το βρείτε στο γνωστό μέρος. ;)


Σχόλια : Leave a Comment »
Ετικέτες: , , , , , , , , , ,
Κατηγορίες : CSS, Javascript, Web development

CSS.getElementsBySelector() v1.0.2

22 08 2008

Μια μικρή ενημέρωση ότι το μικρούλι js library μου έφτασε αισίως στην έκδοση 1.0.2 με 3 νέους υποστηριζόμενους selectors, 2 νέες functions και ένα bugfix.

Θα το βρείτε στο γνωστό μέρος. ;)


Σχόλια : Leave a Comment »
Ετικέτες: , , , , , , , , , ,
Κατηγορίες : CSS, Javascript, Web development

min-height:100% στο body: Μια javascript λύση

1 08 2008

To <body> είναι ουσιαστικά άλλο ένα block level element, με τα θετικά και τα αρνητικά του. Ενίοτε αυτό μπορεί να μας προκαλέσει πρόβλημα, όπως μου συνέβη πρόσφατα.

Στο site που δουλεύω, έχω ρθυμίσει το html και το body να έχουν διαφορετικά (ημιδιαφανή) φόντα, ώστε συνδυαστικά να δίνουν το εφέ φόντου που θέλω (αφού τα CSS3 multiple backgrounds αργούν ακόμα…). Οι περισσότερες σελίδες του site έχουν μεγαλύτερο ύψος από το viewport του browser, ακόμα και σε μεγάλες αναλύσεις, οπότε δεν μου είχε τύχει περίπτωση να είναι το περιεχόμενο μικρότερο από το viewport, μέχρι που ασχολήθηκα με τα μηνύματα λάθους που εμφανίζονται αν κάτι πάει στραβά. Ο σχεδιασμός που αποφάσισα ήταν τέτοιος, που τα περισσότερα οδηγούσαν το body να έχει μικρότερο ύψος από το viewport, ακόμα και στο laptop μου που έχει ανάλυση μόλις 1280×800. Το αποτέλεσμα ήταν να “κόβεται” απότομα το φόντο του body και να φαίνεται άσχημο.

Η πρώτη μου σκέψη ήταν να δώσω ένα height:100% σε html και body. Το αποτέλεσμα ήταν να φτιάξει μεν στις περιπτώσεις που το ύψος του περιεχομένου ήταν μικρότερο από το viewport και να χαλάσει στις υπόλοιπες (που αποτελούσαν και την πλειοψηφία). Η δεύτερη σκέψη μου ήταν να αλλάξω το height:100% με min-height:100%. Τίποτα, σαν να μην υπήρχε. Η τρίτη μου σκέψη ήταν να συμβουλευτώ τον παλιόφιλο γούγλη :P . Μετά από πολλαπλές αναζητήσεις κατέληξα ότι λύση δεν υπάρχει, τουλάχιστον χωρίς tables και χωρίς javascript, οπότε το πήρα απόφαση ότι θα χρειαζόταν να γράψω λίγη javascript για να λυθεί. Διαβάστε την συνέχεια του άρθρου »


Σχόλια : Leave a Comment »
Ετικέτες: , , , , , , , ,
Κατηγορίες : CSS, Javascript, Web design

CSS.getElementsBySelector() v1.0.1

30 07 2008

Καταρχάς ντοντ γουόρι, δεν πρόκειται να μετατραπεί το blog σε dev blog του εν λόγω script επειδή 2 συνεχόμενα ποστ το αφορούν :P

Απλά δεν έτυχε να βρω κάτι άλλο αξιόλογο να γράψω στο ενδιάμεσο και να έχω και όρεξη να γράψω για αυτό :P .

Λοιπόν, ενημερώνω if anyone is interested ότι έκανα ένα “update” στο εν λόγω script, διορθώνοντας 2 bugs και προσθέτοντας 2 νέες μεθόδους (CSS.setEvent() και Array.prototype.iterate()). Θα το βρείτε στη σελιδούλα του.

Και ένα trackback για όσους παρακολουθούν ή θα παρακολουθήσουν στο μέλλον μόνο το προηγούμενο ποστ (λέμε τώρα): trackback

PS: Προσωπικά πάντως, οι μέρες που αφιέρωσα να το γράψω έχουν ήδη αποδώσει, μιας και έκανε τη δουλειά μου πολύ ευκολότερη. Ακόμα και κανείς άλλος να μην το χρησιμοποιήσει, έχει εκπληρώσει το σκοπό του. :)


Σχόλια : Leave a Comment »
Ετικέτες: , , , , , , , ,
Κατηγορίες : CSS, Javascript, Web development

getElementsByCSSSelector() and more…

21 07 2008

H JavaScript διαθέτει τις ενσωματωμένες μεθόδους getElementById() και getElementsByTagName() (και σε κάποιους browsers επίσης την getElementsByClassName()). Παρόλο που οι μέθδοδοι αυτές επαρκούν για τις περισσότερες καθημερινές απαιτήσεις των scripts σας, ορισμένες φορές χρειάζεται να επιλέξετε στοιχεία χρησιμοποιώντας πιο εξειδικευμένα κριτήρια. Οι επιλογείς CSS προσφέρουν αυτή τη δύναμη, αλλά η JavaScript δεν διαθέτει μέθοδο getElementsByCSSSelector().

Μιας και είχα παρατηρήσει να χρειάζομαι συχνότατα κάτι τέτοιο, τις τελευταίες ημέρες τις αφιέρωσα γράφοντας το και ευελπιστώ να μου γλιτώσει περισσότερες εργατώρες από αυτές που αφιέρωσα για να το γράψω. Μη με ρωτήσετε γιατί δεν χρησιμοποίησα κάποιο framework: Αφενός μεν δεν ήθελα να φορτώσω ολόκληρο επιπλέον framework μόνο και μόνο για αυτό, αφετέρου μου αρέσει να γνωρίζω τι κώδικας υπάρχει στη σελίδα, όσο είναι εφικτό.

Μαζί με αυτό θα βρείτε και διάφορες ακόμα βοηθητικές συναρτήσεις που θεωρώ αρκετά πιθανό να σας χρησιμεύσουν. Έχω φτιάξει μια μικρή σελιδούλα για την παρουσίαση του, την οποία θα βρείτε στο http://code.e-steki.gr/cssselect/ . Θα με ενδιέφερε να μάθω τις σκέψεις για αυτό, όποιες και να είναι. :-)

ΥΓ: Ο τίτλος είναι ελαφρώς παραπλανητικός: Η συνάρτηση μου δεν ονομάζεται getElementsByCSSSelector() αλλά CSS.getElementsBySelector().


Σχόλια : 1 σχόλιο »
Ετικέτες: , , , , , , ,
Κατηγορίες : CSS, Javascript, Web development

Button με εικονίδιο και κείμενο γίνεται; Βεβαίως και γίνεται!

27 06 2008

…και όχι, χωρίς να καταφύγετε σε λύσεις του στυλ “div που μοιάζει με button”.

Σκεφτόμουν ότι κάτι τέτοιο είναι πολύ στοιχειώδες για τη θεματολογία που θα ήθελα να έχει το blog, όμως προς μεγάλη μου έκπληξη παρατηρώ ότι αρκετοί συνάδελφοι δεν το γνωρίζουν, και θεωρούν ότι button μπορούν να δημιουργήσουν μόνο με το κλασσικό <input type=”button/submit/image” /> τρόπο.

Υπάρχει ωστόσο και ένα άλλο tag, το <button /> tag, το οποίο είναι ισοδύναμο όσον αφορά τη λειτουργικότητα με το <input type=”button” />, αλλά επιτρέπει πολλά περισσότερα όσον αφορά την εμφάνιση. Καταρχάς, μπορείτε να βάλετε μέσα ένα <img /> tag και να έχετε αυτομάτως ένα κουμπί και με κείμενο, και με το εικονίδιο σας.

Θα μπορούσε κάποιος να πει “γιατί δεν το κάνεις βάζοντας ως background image σε ένα απλό <input /> το εικονίδιο που θες, ώστε να είναι separated το markup από το presentation όπως ορίζουν τα web standards;” και θα είχε δίκιο, όχι όμως για ολες τις περιπτώσεις. Διαβάστε την συνέχεια του άρθρου »


Σχόλια : 1 σχόλιο »
Ετικέτες: , , , , , , , ,
Κατηγορίες : CSS, Web design

Αυτόματη προσθήκη -webkit-border-radius όπου έχετε -moz-border-radius

20 06 2008

Μέχρι να έρθουν οι μέρες που το CSS3 θα έχει φτάσει σε επίσημο specification που θα υποστηρίζεται από όλους τους browsers, είμαστε αναγκασμένοι αν θέλουμε να χρησιμοποιήσουμε κάποιο feature του να χρησιμοποιούμε proprietary properties του κάθε browser και να ξέρουμε ότι δεν πρόκειται το εφέ μας να φαίνεται ίδιο παντού (με ελάχιστες εξαιρέσεις όπως το opacity που πλέον το υποστηρίζουν όλοι εκτός από τον ΙΕ, ο οποίος όμως έχει αντίστοιχο filter και κάααπως παλεύεται).

Ένα τέτοιο παράδειγμα είναι και το border-radius. Επί του παρόντος, υποστηρίζεται μόνο από Firefox 3 και Safari 3 (υπάρχει και στον Firefox 2, αλλά τόσο άθλιο που δεν αξίζει). Προφανώς, σε περιπτώσεις που θέλουμε όπωσδήποτε κάτι να έχει στρογγυλεμένες γωνίες θα καταφύγουμε σε κάποιον από τους all time classic τρόπους (τεχνικές με background images, τεχνικές με javascript κοκ). Υπάρχουν όμως και περιπτώσεις που κάτι φαίνεται αρκετά όμορφο χωρίς rounded corners, και δεν θεωρούμε απαραίτητο να το φορτώσουμε με το extra markup που είται απαιτείται είτε παράγεται από όλες τις υπάρχουσες cross-browser μεθόδους για rounded corners. Σε αυτή την περίπτωση χρησιμοποιούμε proprietary css properties (-moz-border-radius, -webkit-border-radius). Μεγάλα παιδιά είστε, δεν χρειάζεται να σας επισημάνω τους “κινδύνους” από κάτι τέτοιο (πχ css που δεν περνάει το validation) σαν τις προειδοποιήσεις στα πακέτα των τσιγάρων. Όποιος το χρησιμοποιεί υποτίθεται ότι ξέρει γιατί το κάνει και ποιές είναι οι συνέπειες.

Ωστόσο ο σκοπός του παρόντος δεν είναι να αναλύσει τα αρνητικά και τα θετικά των τρέχοντων implementations του border-radius. Το παρόν post έχει σκοπό να εγκαινιάσει μια νέα κατηγορία στο blog: Dreamweaver find & replace regular expressions. Διαπιστώνω ότι πολλοί συνάδελφοι δεν έχουν ασχοληθεί με τα regular expressions ενώ πέρα από προγραμματιστική ευκολία μπορεί να τους βοηθήσουν να γλιτώσουν αρκετό χρόνο από βαρετά tasks. Έτσι, αποφάσισα στην κατηγορία αυτή να ανεβάζω διάφορα έτοιμα dreamweaver queries όταν κρίνω ότι πέρα από μένα, μπορεί να χρησιμεύσουν και σε άλλους. Διαβάστε την συνέχεια του άρθρου »


Σχόλια : 3 σχόλια »
Ετικέτες: , , , , , , , , , ,
Κατηγορίες : CSS, DW Find & Replace RegExps, Web design

CSS, small caps και ελληνικά: Μια javascript λύση

21 05 2008

Ίσως ήδη γνωρίζετε ότι στα ελληνικά η χρήση CSS Small Caps είναι απαγορευμένη εξαιτίας των τόνων που παραμένουν και στα κεφαλαία. Προσωπικά, λατρεύω τα Small Caps για επικεφαλίδες. Θεωρώ ότι δίνουν ένα αρκετά φινετσάτο, κομψό και μοντέρνο στυλ (ε ψιτ, εσύ που διαφωνείς και ξινίζεις τη μούρη σου αυτή τη στιγμή: γούστα είναι αυτά :P ).

Οπότε σήμερα που τα χρειάστηκα, δεν υπήρχε περίπτωση να τα αφήσω εξαιτίας αυτού του προβλήματος. Οπότε σκέφτηκα μια απλή javascript λύση, που σίγουρα έχει αρκετά περιθώρια βελτίωσης: Διαβάστε την συνέχεια του άρθρου »


Σχόλια : 3 σχόλια »
Ετικέτες: , , , ,
Κατηγορίες : CSS, Javascript

« Προηγούμενες Καταχωρίσεις