Πριν ξεκινήσω κι εγώ τις καλοκαιρινές μου διακοπές σκέφτηκα να μαζέψω μερικά κόλπα, μυστικά και λύσεις σε διάφορα μικρά ή μεγάλα προβλήματα που συνάντησα στην καθημερινή μου πλέον ενασχόληση με το front-end programming, για να τα βρείτε έτοιμα και να μην τραβιέστε με τις ώρες!
CSS3 PIE
Πρόκειται για μια βιβλιοθήκη .htc (HTML Component(s) ή αλλιώς, D[ynamic]HTML για Internet Explorer, είναι λίγο μπερδεμένο…) που καταφέρνει, με σημαντικό βαθμό επιτυχίας, να προσθέσει εφέ CSS 3 σε Internet Explorer 6-8! Θα πρέπει να διαβάσετε το documentation φυσικά για μερικά γνωστά προβλήματα αλλά είναι πολύ πιθανό, σε αρκετές περιπτώσεις, να γλυτώσετε πολλές ώρες development αφού θα μπορέσετε να χρησιμοποιήσετε border-radius, box-shadow και gradients χωρίς καθόλου γραφικά! Εννοείται πως ο μισός μισθός σας θα πρέπει να γίνει δωρεά στους developers!
word-wrap
Δε συνηθίζω να παραπέμπω σε άλλο site για την ανάγνωση ενός άρθρου χωρίς να προσθέσω ή να διασαφηνίσω κάτι αλλά εδώ δεν έχω να προσθέσω τίποτα! Το word-wrap είναι ένας ξεχασμένος κανόνας CSS 3 που ενώ υποστηρίζεται από το 2001 (!) σπάνια αναφέρεται. Θυμάμαι πως κάπου κάποτε το είχε πάρει το μάτι μου αλλά μέχρι εκεί…
Zen Coding
Αυτό είναι ένα πρόσθετο για τον αγαπημένο σας editor που, έπειτα από μόλις 10 λεπτά χρήσης, θα αναρωτηθείτε πως ζούσατε μέχρι τώρα! Αφού μάθετε τα βασικά της σύνταξης, θα μπορείτε να χτίσετε το σκελετό της HTML με 1 γραμμή κώδικα όπως αυτή html>(head>title)+(body>(div#header)+(div#nav>ul>li*5>a)+(div#main>(div.article*2)+(div.sidebar))+(div#footer)) που όταν επεκταθεί (με Ctrl+E στο Notepad++) δίνει το παρακάτω:
<html> <head> <title></title> </head> <body> <div id="header"></div> <div id="nav"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <div id="main"> <div class="article"></div> <div class="article"></div> <div class="sidebar"></div> </div> <div id="footer"></div> </body> </html>
Είναι τόσο εύκολο που σε πιάνει νευρικό γέλιο, διάολε! Και που να δεις τι άλλα κάνει…
Γρήγορη αναζήτηση
Η λειτουργία της γρήγορης αναζήτησης υπάρχει στα περισσότερα sites, συνήθως πάνω δεξιά, και αρκετά συχνά έχει ένα ιδιαίτερο design όπως το παραπάνω — δεν λειτουργεί, μην βαράτε άδικα!. Εγώ κατέληξα πως ο καλύτερος τρόπος για να το φτιάξω αυτό είναι με 2 εικόνες: 1 background-image στο <fieldset> και 1 <input type="image">
<form action=""> <fieldset> <label for="keyword">Αναζήτηση με λέξη κλειδί...</label> <input id="keyword" name="keyword" type="text" /> <input class="go" src="quicksearch.png" type="image" /> </fieldset> </form>
fieldset {
background:url('images/bg_quicksearch.png') no-repeat;
display:block;
height:35px;
overflow:hidden;
position:relative;
width:266px;
}
label {
display:none;
}
#keyword {
border:0;
background:transparent none;
margin:10px 0 0 10px;
width:225px;
}
.go {
border:none;
position:absolute;
right:11px;
top:11px;
}
Δεν υπάρχει κανένα κόλπο και κανένα μυστικό στον παραπάνω κώδικα. Το fieldset γίνεται block, με συγκεκριμένες διαστάσεις (τις διαστάσεις του background-image προφανώς) και δέχεται position:relative για να μπορέσω να τοποθετήσω absolutely το <input type="image">, εκεί ακριβώς που το θέλω. Το <input type="text"> έχει καθορισμένο πλάτος ενώ ρυθμίζω τη θέση του με margins — μπορώ όμως να χρησιμοποιήσω κι εδώ position:absolute. Κρύβω το label με display:none και τέλος, αν θέλω, χρησιμοποιώ ένα jQuery plugin για να το εμφανίσω μέσα στο πεδίο — δεν δουλεύει είπα! Δεν χρειάζεται κάτι περισσότερο ενώ είναι τα απολύτως ελάχιστα tags που απαιτούνται για την περίσταση.
(Βαθμολογία: +3, ψήφοι: 3)
Loading ...
