zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden mit JS CSS Hacks ansprechen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.07.2009, 13:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2007
Beiträge: 51
Camelrider befindet sich auf einem aufstrebenden Ast
Standard mit JS CSS Hacks ansprechen

Hi

Ich bin grad dabei ein Projekt von einem Freund auszubauen -
Problem ist dabei dass ich mittels JS eine CSS-Eigenschaft ändern
muss (width) die für IE6 IE7 und FF unterschiedliche Werte hat.

Im Ursprungs-CSS ist das ganze mit CSS-Hacks gelöst (*html, :root)

Meine Frage wäre jetzt ob ich eine Chance diese Hacks anzusprechen -
mittels document.getElementById("xx").style.width = "xpx" spreche ich ja nur die ungehackte Variante an

Ist das prinzipiell möglich oder muss ich das umbauen so dass keine Hacks mehr nötig sind ?

lg Camelrider
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.07.2009, 14:05
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.024
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Am besten wäre es, einzelne Style-Eigenschaften überhaupt nicht mit JS zu verändern, sondern wenn möglich nur die Klasse zu tauschen bzw. eine zusätzliche zu vergeben.

Anhand welcher Selektoren oder Hacks die Werte zugewiesen wurden ist egal, davon bekommt Javascript nichts mit. Falls du wirklich zwischen den Browsern unterscheiden musst, dann bleibt dir nichts anderes übrig als das in JS zu wiederholen. Bei diversen Javascript-Frameworks gibt das dafür fertige Methoden.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.07.2009, 14:31
Benutzerbild von Pascolo
Stiller Leser
XHTMLforum-Mitglied
 
Registriert seit: 24.11.2007
Ort: Cham
Beiträge: 640
Pascolo sorgt für eine eindrucksvolle AtmosphärePascolo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Camelrider Beitrag anzeigen
[...] Problem ist dabei dass ich mittels JS eine CSS-Eigenschaft ändern muss [...] die für IE6, IE7 und FF unterschiedliche Werte hat. [...]
In dem Fall gibt es drei verschiedene Zustände. Du müsstest also ermitteln, ob der Internet Explorer verwendet wird und welche Version er hat.

Microsoft selber bietet hier auch sogleich eine Lösung an:

Code:
/**
 * Returns the version of Internet Explorer or a -1,
 * indicating the use of another browser.
 */

function getInternetExplorerVersion()
{
  var rv = -1;
  
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }

  return rv;
}
Anschliessend könntest du sehr leicht zwischen diesen drei Browsern unterscheiden.

Code:
var version = getInternetExplorerVersion();

switch (version) {
  case 6:
    // Internet Explorer 6
  break;
  
  case 7:
    // Internet Explorer 7
  break;
  
  case -1:
    // Andere Browser (Opera, Firefox, Safari, etc)
  break;
  
  default:
    // Andere Internet Explorer Versionen
  break;
}
Wenn du dann die restlichen Browser noch weiter unterscheiden willst, wird das ganze natürlich immer komplizierter. Ich würde mir deshalb den Rat von inta zu Herzen nehmen und solche Sachen nicht Javascript überlassen. Die Nachteile sollten bekannt sein.
__________________
Mit freundlichen Grüssen "Pascolo"

Guter Webspace eSport Topliste Meine Lesezeichen Meine Spielwiese

Geändert von Pascolo (14.07.2009 um 14:13 Uhr) Grund: Siehe Scheppertreiber Einwand.
Mit Zitat antworten
  #4 (permalink)  
Alt 11.07.2009, 14:07
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.931
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

So eine Browserweiche ist Murks. Um den IE zu indentifzieren gibt es conditional compilations, aber die Frage ist ob die CSS Hacks überhaupt für JS relevant sind. Es gibt fast immer bessere Lösungen als zu versuchen einen Bug mit einem workaround zu umgehen.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.07.2009, 14:28
Benutzerbild von Pascolo
Stiller Leser
XHTMLforum-Mitglied
 
Registriert seit: 24.11.2007
Ort: Cham
Beiträge: 640
Pascolo sorgt für eine eindrucksvolle AtmosphärePascolo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
So eine Browserweiche ist Murks. Um den IE zu indentifzieren gibt es conditional compilations [...]
Als Murks würde ich die obige Funktion nicht bezeichnen, denn conditional compilations interpretiert nur der Internet Explorer und genau das will er gar nicht. Er braucht etwas, mit dem er die Browser unterscheiden kann. Natürlich könnte man zuerst die Einstellungen für den Firefox vornehmen und nachher sie einfach für den Internet Explorer wieder überschreiben, doch da finde ich eine Funktion, mit der ich eine solche Unterscheidung vornehmen kann, doch wesentlich einfacher.

Siehe:

Zitat:
Zitat von Camelrider Beitrag anzeigen
[...] Problem ist dabei, dass ich mittels JS eine CSS-Eigenschaft ändern muss [..] die für IE6, IE7 und FF unterschiedliche Werte hat. [..]
Ich muss dir aber Recht geben, dass es für sein Problem wahrscheinlich bessere Alternativen gibt, nach denen hat er aber nicht gefragt.
__________________
Mit freundlichen Grüssen "Pascolo"

Guter Webspace eSport Topliste Meine Lesezeichen Meine Spielwiese

Geändert von Pascolo (11.07.2009 um 14:35 Uhr) Grund: Zusatz für den ersten Abschnitt
Mit Zitat antworten
  #6 (permalink)  
Alt 12.07.2009, 09:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Ich würde hier - wie von inta beschrieben - einfach nur mit Klassen und Conditional Comments arbeiten. 2 CSS-Files, das eine mittels CC nur für den IE sichtbar, das andere für die restlichen Browser. Beide Files haben eine Klasse mit gleichem Namen aber unterschiedliche Eigenschaften besitzen. Wenn man nun die Klasse mittels JS ändert, greifen alle Browser auf die für sie vorgesehene CSS-Datei zu und dieser ganze "Murks" ( ) ist hinfällig. Problematisch wirds aber auch, wenn Hacks auch für andere Browser enthalten sind. Denn die können ja nur in dem File sein, welches nicht per CC eingebunden wurde. Folglich stehst du dann wieder am Anfang. Aber ich entnehme ja deinem Beitrag, dass es sich wohl nur um Hacks für den IE geht.

Sollten die Werte für die Eigenschaften vorher nicht bekannt sein und du folglich die Klasse bzw. deren Eigenschaften nicht vordefinieren kannst, wirst du um den o.g. "Murks" leider nicht drumrum kommen.

Geändert von regloh (12.07.2009 um 09:41 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 13.07.2009, 09:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2007
Beiträge: 51
Camelrider befindet sich auf einem aufstrebenden Ast
Standard

Hi

Vielen Dank für die Anregungen -
Ich hab das PRoblem jetzt so gelöst dass ich einfach neue IDs vergeben habe
und dadurch greifen auch die CSS-Hacks wieder
(war wie immer der Weg des geringsten Widerstands)

Danke für die Tips

lg Camelrider
Mit Zitat antworten
  #8 (permalink)  
Alt 14.07.2009, 07:30
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.457
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Gefährlich:

PHP-Code:
var version getInternetExplorerVersion();

switch (
version) {
  case 
6:
    
// Internet Explorer 6
  
break;
  
  case 
7:
    
// Internet Explorer 7
  
break;
  
  case -
1:
    
// Andere Browser (Opera, Firefox, Safari, etc)
  
break;

Es gibt bei JS auch ein default, das würde, anstelle des case -1 alle anderen
abfangen. switch ohne default kann einen in den Wahnsinn ...
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #9 (permalink)  
Alt 14.07.2009, 10:04
Benutzerbild von Pascolo
Stiller Leser
XHTMLforum-Mitglied
 
Registriert seit: 24.11.2007
Ort: Cham
Beiträge: 640
Pascolo sorgt für eine eindrucksvolle AtmosphärePascolo sorgt für eine eindrucksvolle Atmosphäre
Standard

Stimmt, habe obigen Beispiel-Code angepasst.

Vielen Dank für die Berichtigung.
__________________
Mit freundlichen Grüssen "Pascolo"

Guter Webspace eSport Topliste Meine Lesezeichen Meine Spielwiese
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Doctype und CSS Problem tech CSS 3 29.05.2009 20:16
Brauche Hilfe bei preg_match | CSS im Newssystem Zen5656 Serveradministration und serverseitige Scripte 21 19.01.2007 15:33
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
CSS Hacks werden zum Problem für IE7 Floele Offtopic 24 17.10.2005 11:31
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:34 Uhr.