Επεξεργασία CSS - Πρόβλημα με Transitions, Transforms κ.λπ.

giorgos147 · 25 Ιουνίου 2011

Καλησπέρα.

Αυτές τις μέρες προσπαθώ να μπω στο πνεύμα της CSS. Ήταν μία γλώσσα που πάντα ήθελα να τη μάθω και έκατσα, βασικά, χθες και διάβασα όλο το βιβλίο "CSS for Web Designers" του Dan Cederholm, αφού άκουσα καλά λόγια για αυτό. Να πω ότι γνωρίζω HTML.

Ας πούμε ότι έχουμε το παρακάτω κώδικα, σε ένα αρχείο Index.html:

>
...
<link rel="stylesheet" type="text/css" href="CSS/Template.css" />
</head>

<body>
<div id="logo"></div>
</body>
</html>

και αυτό, σε ένα Index.css:

>#logo {
background-image:url(../images/logo.png);
width: 352px;
height: 127px;
background-repeat:no-repeat;
float: left;
}

#logo:hover{
opacity: 0.5;
}

Αυτό που δε μπορώ αρχικά να κατανοήσω, είναι τη διαφορά της ID Selector και της Class Selector. Δηλαδή, αν έχω καταλάβει καλά, η Class χρησιμέυει όταν τη χρησιμοποιούμε σε πολλά αρχεία/elements. Ή όχι;

Τώρα το κύριο πρόβλημα που έχω.

Ας πούμε ότι έχω το κώδικα που παρέθεσα παραπάνω. Στο

>#logo:hover

, ενώ π.χ. το opacity λειτουργεί μια χαρούλα,όταν για παράδειγμα βάζω την εντολή:

>transition-delay: xS;

ή

>transform:rotate(xdeg);

, αυτές δε λειτουργούν.

Τι κάνω λάθος;

Να'στε καλά.

*Αν έχετε να προτείνεται κάποιο βιβλίο που πραγματικά θα με βοηθήσει, παρακαλώ πολύ μη διστάσετε να μου το προτείνεται. Είτε είναι σε Αγγλικά, είτε Ελληνικά, δεν υπάρχει κανένα πρόβλημα.

macabre_sunsets · 25 Ιουνίου 2011

Κάθε στοιχείο μπορεί να έχει ένα μονο ID - Απεναντίας, μπορεί να έχει πολλά Class

Κάθε ID αντιστοιχεί σε ένα και μόναδικό στοιχείο της σελίδας - Κάθε Class μπορεί να βρίσκετε σε περισσότερα του ενός στοιχεία

Μπορείς να βάλεις το ίδιο ID σε διαφορετικά αρχεία, αλλά να προσέχεις να υπάρχει μια φορά σε κάθε ένα.

parsifal · 25 Ιουνίου 2011

Γεια σου Γιώργο.

Αυτό που δε μπορώ αρχικά να κατανοήσω, είναι τη διαφορά της ID Selector και της Class Selector. Δηλαδή, αν έχω καταλάβει καλά, η Class χρησιμέυει όταν τη χρησιμοποιούμε σε πολλά αρχεία/elements. Ή όχι;

Σε ένα HTML document, δεν επιτρέπεται να δώσουμε το ίδιο id σε δύο ή περισσότερα elements. Άρα: ένας id selector, έστω ο #xxx, επιλέγει το (ένα και μοναδικό) element που υπάρχει στο HTML document μας και στο οποίο έχουμε δώσει ως id την τιμή xxx.

Σε ένα HTML document, επιτρέπεται άνω του ενός elements να ανήκουν στην ίδια κλάση. Άρα: ένας class selector, έστω ο .yyy, επιλέγει (όλα) τα elements που υπάρχουν στο HTML document μας και τα οποία έχουμε ορίσει ότι ανήκουν στην κλάση yyy.

Τώρα το κύριο πρόβλημα που έχω.

Ας πούμε ότι έχω το κώδικα που παρέθεσα παραπάνω. Στο
>#logo:hover
, ενώ π.χ. το opacity λειτουργεί μια χαρούλα,όταν για παράδειγμα βάζω την εντολή:
>transition-delay: xS;
ή
>transform:rotate(xdeg);
, αυτές δε λειτουργούν.

Τι κάνω λάθος;

Δεν έχεις ορίσει σε ποιο ή ποια CSS properties θέλεις να εφαρμόζεται το transition. Αυτό γίνεται με το property transition-property. Π.χ.:
```
>
transition-property: opacity;
```
Ακόμη κι αν κάνεις αυτό που σου λέω στο 1, πάλι δε θα έχεις αποτέλεσμα! Εδώ παίζει περίπλοκη ιστορία: Ο οργανισμός W3C που αναπτύσσει το CSS standard, για τη CSS level 3 έχει αποφασίσει να «σπάσει» τα διάφορα χαρακτηριστικά σε ομάδες, τα λεγόμενα "modules". Αυτά δυστυχώς δεν παγιώνονται με τον ίδιο ρυθμό. Αυτήν τη στιγμή, το transitions module βρίσκεται σε κατάσταση "working draft", γι' αυτόν το λόγο οι περισσότεροι browsers δεν το υποστηρίζουν ακόμη στην προτεινόμενη μορφή του. Δηλαδή, για εφαρμογή transition στην ιδιότητα opacity με καθυστέρηση μισού δευτερολέπτου, το παρακάτω:
```
>
transition-property: opacity;
transition-delay: 0.5s;
```
...δε δουλεύει (ακόμη) σε κανέναν browser. Όμως, μέχρι να παγιωθεί το transitions module (και πολλά από τα υπόλοιπα modules που βρίσκονται στην ίδια κατάσταση), οι browsers παρέχουν υποστήριξη στα λεγόμενα vendor-specific extensions ή prefixes (προθέματα). Για παράδειγμα, ο Firefox και όλοι οι browsers που βασίζονται στην ίδια μηχανή (Gecko) αναγνωρίζουν το πρόθεμα -moz-. Για να εφαρμόσεις λοιπόν το transition που θέλεις και να δουλεύει στους παραπάνω browsers, θα έπρεπε να έχεις στον CSS κώδικά σου τα εξής:
```
>
-moz-transition-property: opacity;
-moz-transition-delay: 0.5s;
```
Αντίστοιχα προθέματα υπάρχουν και για άλλες μηχανές rendering εκτός της Gecko. Για την WebKit που χρησιμοποιεί ο Google Chrome και ο Safari, είναι το -webkit-. Για την Presto του Opera, το -o-. Για την Trident του Internet Explorer, το -ms-. Άρα, έχουμε:
```
>
-moz-transition-property: opacity;
-moz-transition-delay: 0.5s;
-webkit-transition-property: opacity;
-webkit-transition-delay: 0.5s;
-o-transition-property: opacity;
-o-transition-delay: 0.5s;
```
Σημαντική σημείωση: Δεν υποστηρίζουν όλοι οι browsers απαραίτητα τον ίδιο αριθμό CSS3 properties μέσω prefixes. Π.χ. στο παράδειγμα δεν έχω -ms-transition-τάδε, γιατί ο IE9 δεν το υποστηρίζει.

Ένα αυτοτελές παράδειγμα HTML που μοιάζει λίγο με το δικό σου, για να δεις τα παραπάνω:

>
<!DOCTYPE html>
<html lang="el">
<head>
   <meta charset="utf-8" />
   <title>Your title here</title>
   <style>
       #logo {
           background-image: url(http://dummyimage.com/352x127);
           width: 352px;
           height: 127px;
           -moz-transition-property: opacity;
           -moz-transition-delay: 0.3s;
           -moz-transition-duration: 0.7s;
           -webkit-transition-property: opacity;
           -webkit-transition-delay: 0.3s;
           -webkit-transition-duration: 0.7s;
           -o-transition-property: opacity;
           -o-transition-delay: 0.3s;
           -o-transition-duration: 0.7s;
       }

       #logo:hover {
           opacity: 0.5;
       }
   </style>
</head>
<body>
   <div id="logo"></div>
</body>
</html>

giorgos147 · 25 Ιουνίου 2011

Καλησπέρα Parsifal και macabre_sunsets.

Να'στε καλά για τη βοήθεια σας.

Κοίτα να δεις Parsifal που δε μου πήγε το μυαλό ότι ίσως χρειάζεται prefix.

Το θεώρησα δεδομένο ότι θα λειτουργεί δίχως Prefix, και το δοκίμασα και σε Firefox, ο οποίος πίστεψα ότι πάντα λειτουργεί με κάθε εντολή CSS, διότι έτσι είχα καταλάβει, ίσως από λάθος, και δε μου πήγε το μυαλό. -Δηλαδή ότι έχει τεράστια υποστήριξη στην CSS.-

Τέλος πάντων. Πάω να δοκιμάσω ό,τι μου είπε Parsifal.

parsifal · 25 Ιουνίου 2011

Επίσης, κάτι που ξέχασα να αναφέρω: Δεν υπάρχει απαραίτητα αντιστοιχία 1-1 μεταξύ όλων των νέων προτεινόμενων CSS3 properties και των vendor-specific extensions. Δηλαδή, οτιδήποτε βλέπεις τώρα να υπάρχει στα drafts των CSS3 modules, δε σημαίνει πως σώνει και καλά θα υλοποιείται στους διάφορους browsers μέσω prefixes.

Ισχύει και ανάποδα: Μπορεί να υπάρχουν vendor-specific extensions για τα οποία δεν υπάρχει αντίστοιχο property στο CSS standard. Χαρακτηριστικό παράδειγμα είναι τα DirectX φίλτρα που υποστηρίζονται στον Internet Explorer. Αν δεν κάνω λάθος, και ο Firefox έχει κάποια πρωτότυπα extensions με τα οποία μπορείς να κάνεις πραγματάκια που δε γίνονται με standard CSS.

Και μην ξεχνάς ότι η χρήση των παραπάνω «σπάζει» το CSS validation. Το αναφέρω γιατί για κάποιους μπορεί να έχει σημασία αυτό...

giorgos147 · 25 Ιουνίου 2011

Καλησπέρα για ακόμη μία φορά!

Parsifal, κοίταξα το κώδικα που μου παρέθεσες.

Έχουμε αυτό:

>#logo {
      background-image: url(../images/logo.png);
      width: 500px;
      height: 165px;
   -moz-transition-property: opacity;
      -moz-transition-delay: 0.3s;
      -moz-transition-duration: 0.7s;
      -webkit-transition-property: opacity;
      -webkit-transition-delay: 0.3s;
      -webkit-transition-duration: 0.7s;
      -o-transition-property: opacity;
      -o-transition-delay: 0.3s;
      -o-transition-duration: 0.7s;
      -chrome-transition-property: opacity;
      -chrome-transition-delay: 0.3s;
      -chrome-transition-duration: 0.7s;
      -chrome-transform:rotate(χdeg);
   transition-property: opacity;
   transition-delay: 0.3s;
   transition-duration: 0.7s;
   transform:rotate(χdeg);
		
}

#logo:hover {
 opacity: 0.5;
}

για ακόμη μία φορά, δε μου λειτουργούν όλες οι εντολές. Βασικά στο συγκεκριμένο, μόνο η

>transform:rotate(χdeg);

δε λειτουργεί. Τι κάνω λάθος;

Επίσης, ποιος ο λόγος να δώσουμε τις εντολές για Transition στην εντολή για τη παράθεση του Logo στη σελίδα και όχι στο ακριβώς από κάτω που παρέθεσα, το

>:hover

;

Ελπίζω να καταλάβατε τι εννοώ.

Σίγουρα το ανέφερε και το CSS for Web Designers το οποίο αναφέρω στο πρώτο Post στο παρόν θέμα, αλλά θυμάμαι ότι δεν το είχα πιάσει πολύ καλά.

parsifal · 25 Ιουνίου 2011

Τα -chrome- prefixes είναι λάθος, δεν κάνουν τίποτα νομίζω. Έγραψα και πιο πάνω ότι για τους browsers που χρησιμοποιούν τη WebKit engine, όπως είναι οι Safari και Chrome, το σωστό prefix είναι το -webkit-.

Το transform δε σου δουλεύει, για τον ίδιο ακριβώς λόγο που δε σου δούλευε και το vanilla/σκέτο CSS3 transition property. Θέλει τα αντίστοιχα prefixes.

Τέλος:

Επίσης, ποιος ο λόγος να δώσουμε τις εντολές για Transition στην εντολή για τη παράθεση του Logo στη σελίδα και όχι στο ακριβώς από κάτω που παρέθεσα, το
>:hover
;

Ελπίζω να καταλάβατε τι εννοώ.

Νομίζω πως θα δούλευε και με τον τρόπο που λες. Απλά, μου φαίνεται πιο «στρωτό» να οριστούν τα transitions ενός element στον κανόνα που αφορά το κανονικό state (κατάσταση) του element. Αλλά σίγουρα θα υπάρχουν περιπτώσεις που βολεύει περισσότερο τη μία ο ένας τρόπος και την άλλη ο άλλος.

giorgos147 · 25 Ιουνίου 2011

Να'σαι καλά βρε Parsifal. Όσο αναφορά το Prefix για τον Chrome, το βιβλίο που χρησιμοποίησα, αναφέρει το Prefix του Chrome ως -Chrome-.

parsifal · 26 Ιουνίου 2011

Όσο αναφορά το Prefix για τον Chrome, το βιβλίο που χρησιμοποίησα, αναφέρει το Prefix του Chrome ως -Chrome-.

Δεν το έχω συναντήσει πουθενά αυτό το prefix. Αντίθετα, το -webkit- prefix και η χρήση του για στόχευση τόσο του Chrome όσο και του Safari, αναφέρονται σε ένα σωρό πηγές, άρθρα και tutorials στο διαδίκτυο, μπορείς να το διαπιστώσεις και μόνος σου.

giorgos147 · 26 Ιουνίου 2011

Για του λόγου το αληθές, από το βιβλίο που σας είπα:

giorgos147 · 26 Ιουνίου 2011

Καλησπέρα για ακόμη μία φορά!

Λοιπόν, ασχολήθηκα με μία σελίδα ενός φίλου που χρειάζονταν, και ώστε να "παίξω" με αυτά που έμαθα, να δω τι κατάλαβα, αλλά και ώστε να μάθω και κάτι παραπάνω.

Μπορείτε να πάρετε μια ιδέα με το τι έκανα, εδώ:

Ξέρω, δεν είναι κάτι το δύσκολο αυτό που έκανα. Βέβαια έχω χρησιμοποιήσει CSS σε μεγάλο βαθμό στο Menu και στις εικόνες κάτω στο Footer. Τον λογότυπο πάνω αριστερά, τον θόλωσα για αυτονόητους λόγους.

Λοιπόν, αυτό που θέλω να ρωτήσω είναι στο κέντρο, επειδή δεν θέλω να βάλω το κείμενο μου που θα μπει μέσα στο μεγάλο άσπρο πλαίσιο, μέσα στο Index.html, μπορώ να φτιάξω και άλλο ένα, για παράδειγμα, .html αρχείο και να το γράψω εκεί μέσα;

Έχω θολώσει τώρα και δε ξέρω τι να πρωτοσκεφτώ, οπότε, όποιος γνωρίζει, ας με βοηθήσει λιγάκι.

*Τώρα κατάλαβα για ποιον λόγο οι designers/developers μισούν τον IE. Πέντε πράγματα σε CSS έβαλα, και δε λειτουργούν ούτε καν με Prefix, όταν σε όλους τους άλλους λειτουργούν κανονικά όλα. Και το κακό είναι, ότι ασχημένη κατά πολύ η σελίδα δίχως αυτές τις εντολές όπου ο IE δεν εκτελεί.

parsifal · 26 Ιουνίου 2011

Λοιπόν, αυτό που θέλω να ρωτήσω είναι στο κέντρο, επειδή δεν θέλω να βάλω το κείμενο μου που θα μπει μέσα στο μεγάλο άσπρο πλαίσιο, μέσα στο Index.html, μπορώ να φτιάξω και άλλο ένα, για παράδειγμα, .html αρχείο και να το γράψω εκεί μέσα;

Υπάρχουν διάφοροι τρόποι που μπορείς να πετύχεις αυτό που ζητάς όπως π.χ. Server Side Includes, PHP includes, Javascript. Δες αυτό το topic για παράδειγμα. Όμως γιατί να κάνεις κάτι τέτοιο; Τί σε πειράζει να έχεις το κείμενό σου μέσα στο index.html ή αντίστοιχα το κείμενο του Επικοινωνία/About στο αντίστοιχο html; Δεν κερδίζεις κάτι βγάζοντας τα κείμενα σε ξεχωριστά αρχεία.

giorgos147 · 26 Ιουνίου 2011

Υπάρχουν διάφοροι τρόποι που μπορείς να πετύχεις αυτό που ζητάς όπως π.χ. Server Side Includes, PHP includes, Javascript. Δες αυτό το topic για παράδειγμα. Όμως γιατί να κάνεις κάτι τέτοιο; Τί σε πειράζει να έχεις το κείμενό σου μέσα στο index.html ή αντίστοιχα το κείμενο του Επικοινωνία/About στο αντίστοιχο html; Δεν κερδίζεις κάτι βγάζοντας τα κείμενα σε ξεχωριστά αρχεία.

Το σκέφτηκα με βάση ότι θα τα έχω καλύτερα συμαζεμένα. Οκ, δεν υπάρχει κάποιο θέμα.

Χίλια ευχαριστώ για τη βοήθεια.

Haldol · 27 Ιουνίου 2011

...ίσα-ίσα που χάνεις με παραπάνω αρχεία. Γίνονται περισσότερα requests στον server, και κατά συνέπεια αυξάνεται ο χρόνος που απαιτείται για να φορτώσει η σελίδα σου. Φυσικά σε μία στατική σελίδα 2-3 αρχείων σαν τη δική σου κάτι τέτοιο δεν φαίνεται, αλλά όσο ανεβαίνουμε επίπεδο πρέπει να τα προσέχουμε αυτά.

giorgos147 · 27 Ιουνίου 2011

...ίσα-ίσα που χάνεις με παραπάνω αρχεία. Γίνονται περισσότερα requests στον server, και κατά συνέπεια αυξάνεται ο χρόνος που απαιτείται για να φορτώσει η σελίδα σου. Φυσικά σε μία στατική σελίδα 2-3 αρχείων σαν τη δική σου κάτι τέτοιο δεν φαίνεται, αλλά όσο ανεβαίνουμε επίπεδο πρέπει να τα προσέχουμε αυτά.

Ουψ, δε το γνώριζα το παραπάνω.

Να'σαι καλά βρε Haldol για τη πληροφορία!

Σύνδεση

Επεξεργασία CSS - Πρόβλημα με Transitions, Transforms κ.λπ.

Προτεινόμενες αναρτήσεις

giorgos147

macabre_sunsets

parsifal

giorgos147

parsifal

giorgos147

parsifal

giorgos147

parsifal

giorgos147

giorgos147

parsifal

giorgos147

Haldol

giorgos147

Αρχειοθετημένο

Σύνδεση