Herausforderungen des prozentualen Layouts: Browserunterschiede und schwebende Punkte Pr?zisionsprobleme

ist aufgrund der Inkonsistenz des Browsers und der mangelnden Spezifikation der schwimmenden Punktpr?zision ?u?erst schwierig, was zu Ausrichtung und Pr?zisionsproblemen führen kann.

Vorteile von SASS: Verbesserung der Genauigkeit und der Code -Lesbarkeit

SASS ist eine Pr?prozessor -Skriptsprache, die die Pr?zision durch die Behandlung komplexer Berechnungen verbessert und Stylesheets leichter zu lesen und zu aktualisieren kann. Die Standard -Pr?zisionsoption von Sass betr?gt jedoch 5, was für einige F?lle m?glicherweise immer noch zu niedrig ist.

calc() Funktion: Browserberechnung und Rundung

calc(..) CSS -Funktionen erm?glichen es Browsern, Berechnungen und Runden zu verarbeiten, wodurch m?glicherweise bessere Ergebnisse erzielt werden. Diese Funktion, kombiniert mit dem SASS -Betrieb, bietet das Beste aus beiden Welten für die CSS -Pr?zision.

Bei Edenspiekermann verlassen wir uns auf die Code -überprüfung, um sicherzustellen, dass die von uns eingereichten Arbeiten gut genug sind. Eine Sache, die mir oft begegnet, ist die Mehrdeutigkeit in Bezug auf Zahlen (insbesondere Zahlen mit Dezimalpunkten). Dies ist also ein kurzer Artikel, der dieses Thema kl?ren soll.

Anfangseinstellungen

Um die ganze Erkl?rung vor Beginn klarer zu machen, werden wir an einem kleinen Code arbeiten, was für unseren Fall sehr relevant ist.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

Was ist das Problem?

Sie fragen sich vielleicht, was mit diesem Code los ist. Aus dem Aussehen gibt es kein gro?es Problem. Dies ist ein dreispaliges Netzlayout, das weit verbreitet ist.

entsprechen jedoch 33% 33% 99%, nicht 100%. W?hrend dies in den meisten F?llen keinen Unterschied macht, k?nnen 1% bei der Ausrichtung der geraden Linie einen gro?en Einfluss haben. 1% eines Beh?lters, der 14 Pixel breit ist, betr?gt 14 Pixel. Dies ist eine betr?chtliche Entfernung.

Warum k?nnen wir nicht einfach den Dezimalpunkt verschieben (oder hinzufügen), um ihn genauer zu machen? Wir k?nnten die Lücke auf 1,4 Pixel oder sogar 0,14 Pixel reduzieren, was meiner Meinung nach die Mühe nicht mehr wert ist! Dann fangen Sie hier an.

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

Es funktioniert besser, aber immer noch nicht perfekt. John Albin Wilkins diskutiert dieses Thema in diesem Artikel mit dem Titel ?The Dirty Little Secret of Responsive Design“ ausführlich. Wenn Sie es noch nicht gelesen haben, lesen Sie es.

Kann der Browser dies nicht umgehen?

Zu diesem Zeitpunkt fragen Sie sich vielleicht, warum der Browser es nicht zum Laufen bringen kann. Das Problem ist, dass die CSS -Spezifikation (ironischerweise) den Browser -Anbietern nicht angibt, was mit schwimmender Punktpr?zision für prozentuale Zahlen zu tun ist. Wenn die CSS -Spezifikation Details ausl?sst, k?nnen Sie sicher sein, dass jeder Browser sie auf seine eigene Weise behandelt.

Die folgenden Beispiele aus dem obigen Artikel:

[…] Verwenden Sie ein 6-Spal-Netz mit 100% Breite pro S?ule ÷ 6 = 16,666667%. In einem Ansichtsfenster, das 1000 Pixel breit ist (ich habe es bequem ausgew?hlt, um unsere Mathematik zu vereinfachen), wird jede Spalte auf 166,66667 Pixel berechnet. Da die Spezifikation keine Richtlinien enth?lt, k?nnen Browserhersteller ihre eigenen Regeln formulieren. Wenn der Browser zum n?chsten Pixel rundet, erhalten wir in unserem Beispiel 167 Pixel. Seit 167 x 6 = 1002 Pixel haben wir nicht mehr Platz für alle 6 Spalten in unserem Ansichtsfenster. Oder wenn der Browser auf 166 Pixel pro S?ule rundet, werden wir 4 Pixel weniger als perfekt alle Spalten in unser Ansichtsfenster einbringen. —— John Albin Wilkins

Das ist passiert. ?ltere Versionen von Internet Explorer (haupts?chlich 6 und 7) rundeten sich auf die n?chste Ganzzahl und verursachen Layoutunterbrechungen. Webkit Browser rundet sich ab, was katastrophale Layoutergebnisse verhindert, uns aber zus?tzlichen Platz l?sst. Opera (zumindest in ihrem alten Rendering -Motor) tut etwas Seltsames, das zu faul bin, um es zu erkl?ren. Es gibt jedoch keine Regeln für dieses Verhalten in der Spezifikation. Wen sollte ich beschuldigen? Natürlich nicht die Browser, die das Subpixel -Rendering verwenden, da dies letztendlich der Weg ist, um die besten Ergebnisse zu erzielen.

Wie auch immer, dies ist einfach ein Chaos und wir werden dieses Thema im Abschluss dieses Artikels erneut diskutieren.

Wie w?re es mit Sass?

SASS unterstützt mathematische Operationen. Dies ist nichts Neues, es ist tats?chlich eines von mehreren Dingen, die Sass ursprünglich verwendet haben (zum Aufbau eines mathematischen Netzsystems). Wir k?nnen Sass erkennen, dass wir die Breite des Beh?lters in 3 gleiche Teile unterteilen wollen.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

Wir k?nnen auch die prozentuale (..) Funktion verwenden, um dasselbe Ergebnis zu erzielen:

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

In Ruby and Libsass betr?gt die Genauigkeitsoption für SASS 5. Dies ist tats?chlich ein Problem, weil es sehr niedrig ist.

Dieser Code generiert das folgende CSS:

<code>.list-item {
  float: left;
  width: (100% / 3);
}</code>

Dies l?st unser Browserproblem nicht, erleichtert jedoch Schreibstylesheets. Wir müssen uns nicht nur nicht mit den Berechnungen und der Pr?zision befassen, sondern auch den Code leichter zu lesen und zu aktualisieren, indem wir die Berechnungen tats?chlich anzeigen.

Ich denke, das ist eine gute Sache.

Das Beste aus beiden Welten

Bisher haben wir gelernt, dass es besser ist, SASS die Berechnungen für uns verarbeiten zu lassen, anstatt die Werte zu harten. Der beste Weg ist der beste Weg, den Browser so gut wie m?glich zu erledigen. Zu diesem Zweck kann die calc(..) CSS -Funktion verwendet werden.

<code>.list-item {
  float: left;
  width: percentage(1 / 3);
}</code>

Dieser Code wird in nichts kompilieren. Es erscheint im Browser, wie die Autoren schreiben. Der Browser ist dann dafür verantwortlich, das Beste daraus zu machen. Ich werde Ihnen ganz ehrlich sagen, dass ich nicht sicher bin, ob der Browser den Wert calc(..) wie bei regul?ren Werten umgeht. Ich denke, sie machen die Berechnungen und dann rund. Einige Browser scheinen das Subpixel -Rendering in die Gleichung einzubeziehen. Wenn Sie irgendwelche Einblicke dazu haben, teilen Sie es bitte in den Kommentaren mit.

Für Browser, die calc(..) Ausdrücke (haupts?chlich Internet Explorer 8 und Opera Mini) nicht unterstützen, k?nnen wir einen statischen Wert vornehmen, der als SASS -Operation dargestellt wird. Auf diese Weise k?nnen wir das Beste aus beiden Welten haben.

<code>.list-item {
  float: left;
  width: 33%;
}</code>

Schlussfolgerung

Lassen Sie uns schnell überprüfen. Erstens ist das prozentuale Layout aufgrund der Inkonsistenz des Browsers und der mangelnden Spezifikationen für die Pr?zision des schwebenden Punktes schwer zu bew?ltigen.

Dann sind Hardcode-Werte, die durch eine komplexe Berechnung erzeugt werden, normalerweise keine gute Idee. Wir k?nnen SASS eine N?herung berechnen (5 Dezimalstellen).

Besser noch, wir k?nnen den Browser eine Ann?herung berechnen lassen. In einer idealen Welt sollte der Browser in der Lage sein, das Beste daraus zu machen. Um sich in diese Richtung zu bewegen, verlassen wir uns auf die calc(..) -Funktion.

Dies ist fast die aktuelle Situation. Nichts Neues, aber ich denke, eine kurze Bewertung wird helfen!

FAQs über CSS und Sassgenauigkeit (FAQ)

Was ist der Unterschied zwischen CSS und Sass?

CSS (Cascading Style Sheet) ist eine Stylesheet -Sprache, mit der das Aussehen und die Formatierung von in HTML geschriebenen Dokumenten beschrieben werden. SASS (Smart Stylesheets in Syntax) ist eine Pr?prozessor -Skriptsprache, die in CSS interpretiert oder kompiliert wird. Der Hauptunterschied zwischen beiden besteht darin, dass SASS Merkmale aufweist, die in CSS nicht vorhanden sind, wie Variablen, Nist, Mischung, Vererbung usw. Diese Funktionen machen Sass leistungsf?higer und flexibler als CSS.

Wie funktioniert Pr?zision in CSS und Sass?

Die Pr?zision in CSS und SASS bezieht sich auf das Detail und die Genauigkeit des Stilrenders. In CSS ist Pr?zision aufgrund des Mangels an Variablen und Funktionen h?ufig begrenzt. Sass hingegen erm?glicht dank seiner fortschrittlichen Funktionen eine h?here Genauigkeit. Sie k?nnen beispielsweise Variablen für eine bestimmte Farbe oder Gr??e definieren und sie im gesamten Stylesheet konsistent verwenden, um die Genauigkeit und Konsistenz in Ihrem Design sicherzustellen.

Kann ich SASS in einem Webprojekt verwenden?

Ja, Sie k?nnen SASS in jedem Webprojekt verwenden. SASS ist mit allen Versionen von CSS kompatibel. So k?nnen Sie mit CSS beginnen und die SASS -Funktion bei Bedarf hinzufügen. Denken Sie jedoch daran, dass SASS ein Pr?prozessor ben?tigt, um es in ein CSS umzuwandeln, den der Browser interpretieren kann.

Was sind die Vorteile der Verwendung von SASS gegenüber CSS?

SASS bietet mehrere Vorteile gegenüber CSS. Es erm?glicht die Verwendung von Variablen, Verschachteln, Mischung und Erbe, wodurch Ihr Stylesheet organisierter, wiederverwendbarer und leicht zu warten ist. SASS unterstützt auch mathematische Operationen und erm?glicht es Ihnen, Abmessungen und Farben direkt im Stilblatt zu berechnen.

Wie verbessert man die Genauigkeit von CSS oder SASS -Code?

Sie k?nnen die Genauigkeit Ihres CSS- oder SASS -Codes verbessern, indem Sie Variablen verwenden, um konsistente Werte zu erhalten, mathematische Operationen zur Durchführung pr?ziser Berechnungen zu verwenden und Funktionen und Mischungen zu verwenden, um wiederverwendbare Stile zu erhalten. Darüber hinaus kann die Verwendung von CSS -Reset dazu beitragen, die Konsistenz zwischen verschiedenen Browsern sicherzustellen.

Was ist ein CSS -Pr?prozessor und warum braucht Sass ihn?

CSS -Pr?prozessor ist eine Skriptsprache, die die Standardfunktionalit?t von CSS erweitert. Sie k?nnen Variablen, verschachtelte Regeln, Mixins, Funktionen und Mathematikoperationen in Stylesheets verwenden. SASS ist ein CSS -Pr?prozessor. Es ist notwendig, weil der Browser nur CSS interpretieren kann. Daher muss der SASS -Code in CSS zusammengestellt werden, bevor er in einem Webprojekt verwendet wird.

Wie hilft SASS beim Schreiben trockener Code (nicht wiederholen Sie sich)?

SASS unterstützt Funktionen wie Variablen, Mixin und Vererbung, mit denen Trockencode geschrieben wird. Mit einer Variablen k?nnen Sie einen Wert gleichzeitig definieren und an mehreren Stellen verwenden. Mit Mixin k?nnen Sie wiederverwendbare Stile schreiben, die in andere Regeln enthalten sein k?nnen. Mit der Vererbung k?nnen Sie eine Reihe von CSS -Eigenschaften von einem Selektor zum anderen teilen.

Was sind die m?glichen Fallstricke bei der Verwendung von SASS?

W?hrend Sass viele Vorteile bietet, hat es auch potenzielle Fallstricke. Der Bedarf an Pr?prozessoren kann die Komplexit?t des Entwicklungsprozesses erh?hen. Darüber hinaus k?nnen einige SASS -Funktionen wie Nesting und Mixin dazu führen, dass CSS -Ausgangsleistung und Ineffizienz bei unsachgem??er Anwendung aufbl?hen und ineffizienz sind.

Wie kann man mit dem Lernen und mit Sass beginnen?

Es stehen viele Ressourcen zur Verfügung, um Sass online zu lernen. Die offizielle SASS -Website bietet einen umfassenden Leitfaden für den Einstieg. Sie k?nnen auch Tutorials auf Websites für Webentwicklung und Online -Lernplattformen finden. Um mit SASS zu beginnen, müssen Sie in Ihrer Entwicklungsumgebung einen Sass -Pr?prozessor einrichten.

Kann ich meinen vorhandenen CSS -Code in SASS konvertieren?

Ja, Sie k?nnen Ihren vorhandenen CSS -Code in SASS konvertieren. Da SASS ein Superset von CSS ist, ist alle gültigen CSS gültig. Sie k?nnen zuerst Ihre .css -Datei in .scss (Sassy CSS) umbenennen und dann allm?hlich die SASS -Funktion in Ihrem Code verwenden.

Das obige ist der detaillierte Inhalt vonEine Geschichte von CSS und Sass Precision. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!