[CSS][HTML] Размерите на избражението в HTML ли се определят или във външен CSS.


8

Настана следния спор с колеги от академията: По-добре ли е height и width да се слагат като inline style при <img> тага или е по-добре да са във външен CSS файл.

Според много колеги е по-добре да е в самия HTML защото:

1. Страницата се зарежда с място отредено за картинката дори ако CSS или картинката да не се заредят.
2. Определянето на размера в CSS означава най-често селектиране по ID и това предполага "ненужни" id-та в кода на страницата.

Аз обаче клоня към външен CSS защото:

1. На размерите там им е мястото.
2. Ако не зареди CSS файла е единствения вариант, при който ще се покаже дифолтното изображението за липсваща картинка в браузера и няма да се спази размера, което означава разместване на останалите елементи по страницата. НО външния CSS така и не се е заредил, така че слабо ни интересува подобен резултат.

Колегите обаче ме замислиха. Не ми помага много и този линк, който не е в моя полза :)
Имам нужда от съвета на по-опитните от мен. Вътре или вън? :)

П.П: За бога колеги, ползвайте target="_blank" при линкване във форума.






Отговори



8
Размерите на е добре да се задават в HTML, защото CSS се зарежда по-късно и ако са зададени в него, се избутва останалото съдържание.


EDIT by Pavel Kolev: Няма какво повече да се каже по въпроса - напълно изчерпателен и точен отговор. Единствено допълнение - добре е реалните размери на картинката да съответстват на тези които посочвате в html

от doni.todorova (1245 точки)


0
Винаги ще има удобна причина да е в html-а, но аз лично бих си сложил размерите в CSS, понеже ако в страницата ми има доста картинки, бих искал да повечето да ми се визуализират с еднакви размери и ще ми спести време и писане, ако си ги направя в CSS.

от kpacu (1114 точки)


2
Интересно... щом колегите те замислиха и линка даже не е в твоя полза за какво още се бориш :)
Всъщност не съм сигурен че css-a се зарежда след html кода. Да логично е че след като е вътре в него ще има забавяне но според мен няма. Иначе какво ще се получи? Всички сайтове дето зареждат css ще са размазани и той като се зареди ще се пренаредят елементите.
Ако имаш на страницата 50 картинки по твоя начин трябва да им сложиш отделни id-ta, защото id-то е уникално и не може да се повтарвя и всяка да я определиш в css-a. Ами ако са с различни големини?

от saykor (8845 точки)


1
Според мен width и height в html тага, не са елементи с които се определя визуализацията. Те задават основни характеристики на картинката, нещо като value, name, type.

от krasi.nikolov (1412 точки)


0
Много според момент, тъй като променяйки размерите на изображението, променяш и layout-a.

от kdikov (3407 точки)

0
Винаги съм смятал за по- правилно, размерите да са като размера на самото изображение. Случвало ми се е за по- бързо да определям размера през html, но ми изглежда излишно, да доставяш на потребителя голяма картинка и да му я свиваш в малки размери.

от krasi.nikolov (1412 точки)



1
Аз не съм от "по-опитните", но по принцип нищо не ти пречи да зададеш размерите като атрибути в img тага, а след това да ги зададеш отново (или да ги промениш) в CSS-файла. Сега го пробвах, CSS-зададените размери правят override на HTML определените такива.
По този начин от една страна спазваш (поне в известна степен) изискването за разделяне на съдържанието от презентацията, а от друга - може да зададеш като атрибути на img тага такива размери на изображението, които ще минимизират мазалото, ако CSS-а не е зареден.
Разбира се, като всичко в този живот, и този подход си има минус и той е, че увеличаваш (макар и с малко) размера на файловете, които се свалят от потребителя (по-конкретно на HTML-a). Знаем колко е важна оптимизацията за front-end-a. Аз лично бих ползвал този подход за личния си сайт, но ако бях front-end developer на Yahoo например, сигурно нямаше да разсъждавам така.

от petarpenev (3148 точки)


0
Не мисля, че ще се увеличи толкова кода, само малко ще е по тегаво на писателя, но да обърна внимание на приоритетите. Ти си правил тест с html атрибутите което за мен е правилният начин, а ето и малко код http://jsfiddle.net/YNkZX/4/

от kanchev_k (319 точки)

0
Аз съм прохождащ в писането на код , но логическото инженерно мислене което съм придобил от техническото си образование ми подсказва че този вариант е най удачен . Щом като CSS ще пребори HTML нищо не пречи да си дадеме и в HTML някъкви настройки за всеки случей. Иначе стилизирането е ясно къде трябва да е .

от Ivo Georgiev (0 точки)


2
Такъв въпрос имаше на теста по HTML. Верният отговор беше в HTML, за да може браузъра да знае предварително какви са размерите на картинките, а не да гадае.



3

от Svilen_Ivanov (783 точки)


0
Аз и за него ти казах ама не слушаш :)

от saykor (8845 точки)


2
Аз бях на същото мнение като теб, но доколкото разбирам май е по-удобно да се слагат в тага ,освен ако неискаш да ги селектираш по някакъв начин. Всъщност излиза , че е най-добре предварително да си подготвиш img да е в подходящ размер. Доста добър въпрос се оказа и доста полезен!

от Svetli (280 точки)


0
Първо трябва да се уточни какво питаш защото съм сигурен, че някой колеги още не правят разлика между html атрибути и inline css.
На така зададен въпроса (inline css vs external css) аз съм твърдо за external css освен в краен случай когато няма друг начин. Обаче дали да е html атрибут или external css? Това не се бях бях замислял досега и смятам че трябва задължително да се ползват html атрибутите за оразмеряване, а в css-a за динамично преоразмеряване.
П.С. линковете които си дал се отнасят за html атрибути vs css!

от kanchev_k (319 точки)


1

Добро утро!

Интересна дискусия;) И аз, като начинаеща, в подобни случай търся мението на някой по-компетентен. Естествено следва проба грешка и натрупване на личен опит - Тома Неверни.

Опитах се да потърся семантичен HTML5 сайт и да се поуча от добрите практики на големите. Може би знаете колко е трудно да откриеш сравнително известен сайт написан на семантичен HTML. Единственият, който открих за сега е http://html5doctor.com/ . Нямам претенции, че е най-добрия пример за семантика, но на фона на останалите е по-добре:)

Ето и още нещо от http://www.w3schools.com 

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

В старанието си и аз изрядно бях изнесла всичко в CSS, но се очертават корекции. Подкрепям колегите, които са за влагането на weight и height inline.

Приятен ден, 

Диди