/ / Css: schwebe. Ursprüngliche Schwebeeffekte

CSS: Schwebeflug. Ursprüngliche Hover-Effekte

Die Idee des Teilens ist radikal neu gewordenPräsentation von Informationen aus dem Code ihrer Erstellung und Verarbeitung. Es war zu dieser Zeit eine starke Entscheidung, aber dieser Moment wurde damals nicht vollständig erkannt. Wenn die Programmierung von einem einzelnen Computer getrennt wurde, aber nicht im lokalen Netzwerk oder in einer separaten Domänenzone gewann und sich sofort überall verbreitete, wurde erst dann klar, dass die Präsentation von Informationen (in Bezug auf das Design) und die Arbeit damit (in Bezug auf Code) zwei waren Seiten in einer Ebene.

Drei Facetten des Baustellenaufbaus

Aus formaler Sicht gibt es drei HauptpunkteDie Komponente (in verschiedenen syntaktischen Formen), aus der die Site besteht: PHP-Code, JavaScript-Code und CSS-Stilbeschreibungen. Es spielt keine Rolle, wie diese Komponente benannt wird und welche Version, welche Version des HTML-Markups und welche Version des Browsers verwendet wird. Die Kompatibilität wird jetzt nicht hoch geschätzt, weil Zu jedem Zeitpunkt ist es relevant: Was codiert ist und was von dem, was codiert ist, kann angezeigt und ausgeführt werden.

Früher kämpften Sprachen um Ideen, heute kämpfen Hersteller von Standards im Bereich Internet-Technologien und Browser lieber mit leeren Händen.

Persönlich und öffentlich

Die Mittel, mit denen das Internet verfügbar ist,Viele (Computer, Laptops, Tablets, Smartphones), es gibt auch viele Browser. Es gibt keine Garantie dafür, dass ein einzelnes Gerät die Site in der Form anzeigt, in der sie vom Entwickler erstellt wurde. Die Bemühungen der letzteren erreichen nicht immer das Ziel und verleihen dem Webdesign einen einzigen facettenreichen Charakter, dh die Einheit, die Entität überall dort anzuzeigen, wo sie sich für den Besucher öffnet.

Trennung von persönlich und sozial, mit inLetzteres funktioniert nur, Sie können signifikante Erfolge im Design erzielen. Schönheit, künstlerischer Moment und Webdesign sind das Schicksal der entsprechenden Spezialisten und Talente. CSS ist Code, wenn auch sehr eigenartig. Sein Anliegen ist es, Stile (Informationsanzeigeoptionen) zu beschreiben. Mit dem Aufkommen mobiler Geräte wurde CSS mit echter Codierung in Form von Medienabfragen geladen. Die Möglichkeit einer Wiederheirat zwischen Design und Code ist also nicht so unrealistisch, wie es noch vor ein paar Jahren schien.

CSS schweben

Der Entwickler, der CSS-Stile entwickelt,stützt sich auf ihre nachgewiesene persönliche Erfahrung und auf die CSS-Designs, die in den meisten Browsern funktionieren und die meisten Website-Besucher zufrieden stellen. Sie sollten das Beste aus dem Ersten und das Wenigste aus dem Zweiten machen, dann besteht eine viel größere Chance, ein Ergebnis zu erzielen, das fast immer und überall funktioniert.

Erste Regel: Hoffe auf einen Standard, aber sei selbst kein Bösewicht

CSS:Hover - In diesem Fall "ging" die Maus zum Seitenelement. Wenn Sie mit der Maus auf ein Element klicken, wird es aktiv. Wenn sich der Cursor jedoch zur Seite bewegt, kann er sich erneut ändern und in einem aktiven Zustand anzeigen. ": Hover", "aktiv" und "besucht" sind die am häufigsten nachgefragten Pseudoklassen bei der Beschreibung von Stilen.

Im Site-Code ist es sehr praktisch, sich nicht um Kleinigkeiten wie Mausbewegungen über Elemente zu kümmern. Bereitstellung von zwei Beschreibungen im Stylesheet:

Element {

Farbe schwarz;

}

Element: Hover {

Farbe weiß;

Hintergrundfarbe: grün;

}

Holen Sie sich, wenn Sie mit der Maus über das Element fahrenÄndern Sie automatisch die Textfarbe von Schwarz in Weiß und den Hintergrund dieses Elements in Grün. Pseudoklassen können auf jedes Element angewendet werden und eine Vielzahl von visuellen Effekten erzielen.

Webdesign

Die zweite Regel: Vertrauen Sie Standards, konzentrieren Sie sich auf Ihren Code

Alles wäre gut, wenn der Fortschritt bleiben würdeAuf der Ebene der mit Mäusen ausgestatteten Computer und Laptops hat der Fortschritt in der Mobilfunkkommunikation nicht zur Entstehung von Smartphones, Tablets und anderen Mobilgeräten geführt, an die es sehr schwierig ist, ein solches Gerät anzuschließen.

Auf der anderen Seite nur auf ausgerüstetDie Manipulation von Fingern direkt auf dem Touchscreen wird mit einem speziellen Touchscreen-Gerät möglich, wie es bereits bei Smartphones, Tablets und ähnlichen Geräten üblich ist.

Es gibt einen signifikanten Unterschied und: Hover funktioniert nicht wie es sollte. Sie können hier nicht auf Code verzichten, und die Verwendung von Medienabfragen löst nicht alle Probleme.

Button Hover CSS

Kompatibilität ist in zu teuerIn der modernen Informationswelt ist es daher vorzuziehen, sich auf die minimal erforderlichen Anwendungsfälle zu konzentrieren, um die ordnungsgemäße Funktionalität der Website innerhalb der festgelegten Anforderungen für das Webdesign und die funktionale Implementierung sicherzustellen: CSS-Hover, CSS-Hover-Fokus, CSS-Hover aktiv (besucht). Je mehr Code (sowohl im Browser als auch auf dem Server) das Webdesign steuert, desto besser. Ein Programm ist Kontrolle. Es ist besser, wenn diese Kontrolle nicht den aktuellen Standards entspricht, von denen Sie oft nicht wissen, was Sie erwartet.

CSS-Stil schweben

Schaltflächen und andere Seitenelemente

Button Hover CSS ist eine wunderbare Lösung, aberIm Großen und Ganzen ist jedes Element der Seite eine "Schaltfläche". Die Site muss zuallererst lebendig sein. Wenn dies nicht im Code enthalten ist, wenn die Aufgabe darin besteht, eine Site zu erstellen, die sich dem Anwendungsbereich angemessen entwickelt und unter Berücksichtigung des Verhaltens des Besuchers handelt, können Sie den Seitenelementen zumindest mithilfe von CSS-Stilen Lebendigkeit verleihen.

Hover-Effekte

Es ist bequem, Hover-Effekte zu verwenden. Mit ihrer Hilfe können Sie den Seiten leicht Lebendigkeit verleihen, aber der Code weiß nicht, was die Maus auf dem Bildschirm tut, wenn es keine Möglichkeit gibt, ihre Bewegung darin zu verfolgen. Unter diesem Gesichtspunkt kann der Code, wenn er die Bewegung der Maus (= die Bewegung des Fingers auf dem Smartphone) steuert, das Element unabhängig hervorheben oder transformieren. Dies hat nichts mit Pseudoklassen zu tun, gibt dem Code jedoch die volle Kontrolle über das Erscheinungsbild der Seite und ermöglicht die angemessene Anzeige auf verschiedenen Geräten in verschiedenen Browsern.

Fallstricke in Stylesheets

Sagen Sie, dass sie in Bezug auf Stilbeschreibungen Standard sindCSS weiß nicht, was es tut, aber es ist auch unmöglich zu behaupten, dass es vollständig mit anderen Standards im Bereich der Internetprogrammierung interagiert.

Stile und Pseudoklassen können im Schritt beschrieben werdenSeitencodierung in dem Moment, in dem der Server die Seite bildet und in der Dynamik: Bereits im Browser können Sie problemlos einen neuen Stil erstellen und den vorhandenen ändern.

Verwenden von AJAX, wenn es nicht erneut benötigt wirdGenerieren Sie eine Seite, um eine Reaktion auf die Aktion eines Besuchers anzuzeigen, und es reicht aus, das Element zu ändern, oder mehrere Elemente fügen ein wenig "Pfeffer" hinzu. "Freundschaft" von Codes - was bereits im Browser (JavaScript) und was auf dem Server (PHP) ist - ist das Los des Autors (Programmierers) der Site.

CSS-Hover-Fokus

Aus wie der Algorithmus davonDie Interaktion hängt nicht nur von der Anzeige der Elemente auf der Seite ab, sondern auch von ihrer weiteren Wahrnehmung durch den Code. Einfach ausgedrückt sind Pseudoklassen (insbesondere) sehr gut für die Statik geeignet, wie für eine Segelyacht in einem klaren Meer mit leichtem Wind - alles ist offensichtlich, zugänglich und kontrollierbar. Wenn sich das Wetter ändert oder wenn der Wind stärker wird oder ein Besucher eine unvorhergesehene Situation auslöst, können Sie schnell ins Riff laufen und den Besucher verlieren.

Standard und seine Emulation

Der Schwebeflug im CSS-Stil kann emuliert werdenüber JavaScript mithilfe der Ereignisse onmouseover und onmouseout. Dies ist oft das Ende davon. Unter dem Gesichtspunkt des gesunden Menschenverstandes ist es beim Erstellen einer wirklich funktionierenden Website besser, die Kontrolle in Ihren Händen zu halten, als sie der Gnade mythischer Standards zu überlassen, die sich außerhalb des Willens und des Wunsches des Entwicklers ändern.

Manchmal kann man so etwas wie „gegeben“ lesenDie Funktion ist sogar im Internet Explorer verfügbar. “Sie können jedoch häufiger nachlesen, welche Stilbeschreibungen von einem bestimmten Browser wahrgenommen werden. Viel seltener erfahren Sie, wie sich JavaScript in bestimmten Browsern unterscheidet.

CSS-Schwebeflug aktiv

Die gesammelte Erfahrung schätzen, bewunderndie Fähigkeiten von "Chrome" und "Opera", die die Langsamkeit und Trägheit des Browsers vom Hersteller kritisieren (unvergesslich, das Herzstück jedes IE-Programmierers von Microsoft: "Der gute alte Internet Explorer hat nicht nur die Faulen beschimpft. Oder jemand, der nur weiß, wie man Klondike am Computer spielt “, - Zitat eines unbekannten Internetautors), sollten Sie sich an den goldenen Mittelwert halten: Verwenden Sie etwas, das überall und immer funktioniert.

Menschen brauchen Geld, um arbeiten zu können. Wenn sie Nervenkitzel brauchen, gehen sie normalerweise zum Standesamt oder ins Theater, aber nicht ins Internet.

Emulation und Kontrolle

Früher, als die Programmierung aktiviert wurdeBeine war es üblich, den Ältesten zuzuhören und richtig zu schreiben. Heutzutage gibt es zu viele Senioren, alles ändert sich zu schnell, und wenn Sie allen zuhören, bleibt nicht einmal genug Zeit für eine sehr einfache Arbeit, für eine minimal funktionierende Website.

Bei der Programmierung geht es in erster Linie um Steuerung und InIn Fällen, in denen der Standard die Regeln voreingenommen festlegt oder Sie eine starke Änderung der Regel, deren Beseitigung und das Auftreten einer neuen Regel erwarten können, war die beste Entscheidung immer, keine Entscheidungen zu treffen, sondern die erforderliche Site-Funktionalität mit dem minimal möglichen, aber tatsächlich funktionierenden Code zu implementieren.